iview render函数（vue render函数）

iview 的render函数就是vue的render函数，iview常用在表格里面自定义内容，下面来看render函数常用的配置：

• 1、 h是createdElement的简写，有3个参数：
  语法：render:(h,params)=>{}

render:(h,params) => {
    return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])
}

• h的第三个参数支持数组的形式，数组里面可以是多个h渲染出来的元素对象或字符串 *

h("元素名称或组件名称", {
     domProps: { // 原生dom元素的一些属性
         value: 1,
         type: 'number',
         min: 1，
         innerHTML：’‘
     },
     props:{ // 传给组件数据 比喻iview  Button的type,size 等等
            type:'text',
            size:'small'
      }，
     class:{ // 类
            btn:true// 
      }，
      attrs:{ // html属性,class
            id:'box'
            class:'brn2'
      }，
      style:{ // 内联样式

      },
      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'}}, '地方')
}

图片:
2.2. 当定义的元素中要嵌套其他元素时：

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

如图可见，当元素嵌套时，元素里面的内容会覆盖父元素的内容，下图中左边的机台图片及信息该怎么显示呢？

我们可以嵌套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. 如何根据后台的数据判断是否显示某些元素：

{
       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 ""} //未上线时不显示}
}