iview 的render函數(shù)就是vue的render函數(shù)，iview常用在表格里面自定義內容，下面來看render函數(shù)常用的配置：

• 1、 h是createdElement的簡寫，有3個參數(shù)：
  語法：render:(h,params)=>{}

render:(h,params) => {
    return h(" 定義的元素 "，{ 元素的性質 }，" 元素的內容"/[元素的內容])
}

h的第三個參數(shù)支持數(shù)組的形式，數(shù)組里面可以是多個h渲染出來的元素對象或字符串

h("元素名稱或組件名稱", {
      domProps: { // 原生dom元素的一些屬性
          value: 1,
          type: 'number',
          min: 1，
          innerHTML：’‘
      },
      props:{ // 傳給組件數(shù)據(jù) 比喻iview  Button的type,size 等等
             type:'text',
             size:'small'
       }，
      class:{ // 類
             btn:true// 
       }，
       attrs:{ // html屬性,class
             id:'box'
             class:'brn2'
       }，
       style:{ // 內聯(lián)樣式

       },
       slot:'slotName', // 組件的插槽
       on:{ // 事件 包括組件的自定義事件
             click:()=>{
              },
           'on-change':()=>{
             },
       }，
      nativeOn:{ // 類似vue的.native修飾符，自定義組件常用
             click:()=>{
             }
      }
      },'文本啊啊啊'
  )       

• 2. 用法包括：
     2.1. 當定義的元素沒有其他元素時：

render:(h,params)=>{
    return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}

image.png

2.1. 當定義的元素中要嵌套其他元素時：

render:(h,params)=>{
     return h('div',{style:{width:'100px',height:'100px',background:'#ccc'}},[h('p','內容2')],'內容1')
}

image.png

如圖可見，當元素嵌套時，元素里面的內容會覆蓋父元素的內容，下圖中左邊的機臺圖片及信息該怎么顯示呢？

image.png

我們可以嵌套3層元素來完成，來看看第一二層元素的嵌套：

render:(h, params) => {
  return h('div',[
                  h('div',{style:{float:'left',width:'50px',height:'50px',background:'#ccc'}},[h('p','內容2')]),
                  h('div',{style:{float:'left',width:'50px',height:'50px',background:'#fc1'}},[h('p','內容2')])
                ])
}

2.3. 元素如何綁定事件：

on: {
    click: () => {console.log('ffff')},
    mouseover:() => { console.log('bbb')}
 }

2.4. 如何根據(jù)后臺的數(shù)據(jù)判斷是否顯示某些元素：

{
       title: '操作',
       align:'center',
       width:130,
       render:(h, params) => {
              let status = params.row.Status; //0:空閑  1:游戲  2:未上線
              if (status===0){ return h('Button','空閑中') };
              if (status===1){ return h('Button','游戲中')};
              if (status===2){ return ""} //未上線時不顯示}
}