iview table里的render的一些数据格式

{
 title:'操作',
  align: 'center',
  width:120,
  render:(h,params)=>{
      return h('div',[
          h('span', {
              style:{
                  'margin-right':'10px',
                  'color':'#2d8cf0',
                  'cursor':'pointer'
              },
              on: {
                  click: () => {
                      this.edit(params.row.id)
                  }
              }
          },'编辑'),
          h('span', {
              style:{
                  'color':'#2d8cf0',
                  'cursor':'pointer'
              },
              on: {
                  click: () => {
                      this.delete(params.row.id,params.row.accountName)
                  }
              }
          },'删除')
      ])
  }

Button

{
    title: '操作',
     align: 'center',
     render:(h,params)=>{
         return h('div',[
             h('Button', {
                 props: {
                     type: 'primary',
                 },
                 style:{
                     'margin-right':'5px'
                 },
                 on: {
                     click: () => {
                         this.edit(params.row.id)
                     }
                 }
             },'编辑'),
             h('Button', {
                 props: {
                     type: 'primary',
                 },
                 on: {
                     click: () => {
                         this.delete(params.row.id)
                     }
                 }
             },'删除')
         ])
     }
 }

switch

{
      title: '状态',
      width:60,
      align: 'center',
      render:(h,params)=>{
          return h('div',[
              h('i-switch', {
                  props: {
                      type: 'primary',
                      value: true  //控制开关的打开或关闭状态，官网文档属性是value
                  },
                  style: {
                      //display: params.index !== 0 ? 'none' : 'inline'
                  },
                  on: {
                      'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                      //参数value是回调值，并没有使用到
                          this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
                      }
                  }
              })
          ])
      }
  }

checkbox

{
  title: '是否启用',
    align: 'center',
    width:200,
    key:'flag',
    render:(h,params)=>{
        const row = params.row;
        const flagVal = row.flag
        return h('div',[
            h('Checkbox', {
                props: {
                    value: flagVal ,
                },
                on:{
                    'on-change': () =>{
                        alert(1);
                    }
                }
            })
        ])
    }
},

对数据进行操作

select

render: (h, params) => {
    return h('Select', {
        props:{
            value: this.data[params.index].volumeType,
        },
        on: {
            'on-change':(event) => {
                this.data[params.index].volumeType = event;
            }
        },
    },
    [
        h('Option',{
            props: {
                value: '1'
            }
        },'option1'),
        h('Option',{
            props: {
                value: '2'
            }
        },'option2')
    ]
    );
},

好，现在我们实现了基本的渲染。现在我们实现动态改变option的内容，与组件的data结合起来，毕竟当数据量大的时候，总不能一个一个的写上去。

观察render的第三个参数为一个对象数组，我们可不可以使用便利数据数组的方式生成呢？（废话）

直接上代码，在数组的地方写入：

this.volumeTypes.map(function(type){
    return h('Option', {
        props: {value: type}
    }, type);
})

其中，this.volumeTypes就是我们的列数据，当然，这是最基本的绑定的写法，如果想使用对象数组，自行研究，很easy的~
这是我们的最终结果：

{
    title: '卷类型',
    key: 'volumeType',
    align: 'center',
    render: (h, params) => {
        return h('Select', {
            props:{
                value: this.data[params.index].volumeType,
            },
            on: {
                'on-change':(value) => {
                    this.data[params.index].volumeType = value;
                }
            },
        },
        this.volumeTypes.map(function(type){
            return h('Option', {
                props: {value: type}
            }, type);
        })
        );
    },
},  

自己的项目

 {
        title: '服务项目',
        align: 'center',
        key: 'categoryId',
        render: (h, params) => {
          let row = params.row
          let optionArr = []
          row.allType.forEach(item => {
            optionArr.push(h('Option',{
              props: {
                value: item.categoryId
              }
            }, item.categoryName))
          })
          return h('Select', {
              props:{
                value: row.categoryId,
              },
              on: {
                  'on-change':(event) => {
                    row.categoryId = event
                  }
              },
          }, optionArr)
        }
      }

slot
toolTip里的卡槽slot,应放到props同级
props: {},
slot: ‘’

h('Tooltip',{
	props: {
		placement:'bottom',
		content:'tishi',
		transfer: true
	},
	},[h('Icon',{
        props:{
          type:'ios-information'
        },
        class:'font-red'
      }),
		h('div',{
			slot: 'content'
		},[
				h('p', {class:'tc'}, '提示：'),
				h('p', '系统内置角色不允许删除')
			]
		)
	]	
);

位置很重要
先写父元素的props，然后再写父元素的子集数组，不然content里面的内容出不来
![](https://img-blog.csdnimg.cn/20200110100620544.png
效果

日期

{
    title: '夜间服务开始时间',
    key: 'darkStartTime',
    align: 'center',
    render: (h, params) => {
      return h('div', [
        h('DatePicker', {
          props: {
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            placeholder: '选择夜间服务开始时间',
            transfer: true,
            value: params.row.darkStartTime
          },
          options: {
            disabledDate: (date) => {
              if (params.row.darkStartTime) {
                  return date && date.valueOf() > new Date(params.row.darkStartTime).valueOf()
              };
              if (!params.row.darkStartTime) {
                  return false
              }
            }
          },
          on: {
            'on-change': e => {
              if (e) {
                params.row.darkStartTime = e;
              } else {
                params.row.planDateFrom = '';   // 必须有各种判断，否则清空时无法解除之前的禁用
              }
            }
          }
        })
      ])
    }
  }

TimePicker

 {
        title: '夜间服务结束时间',
        key: 'darkEndTime',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('TimePicker', {
              props: {
                format: 'HH:mm',
                placeholder: '选择夜间服务开始时间',
                transfer: true,
                value: params.row.darkEndTime
              },
              on: {
                'on-change': e => {
                  if (e) {
                    params.row.darkEndTime = e;
                  } else {
                    params.row.darkEndTime = '';   // 必须有各种判断，否则清空时无法解除之前的禁用
                  }
                }
              }
            })
          ])
        }
      }

inputNumber

{
    title: '退货数量',
    key: 'curQuantity',
    align: 'center',
    render: (h, params) => {
      let child = h('InputNumber', {
        props: {
          min: 1,
          max: params.row.maxQuantity,
          value: params.row.curQuantity,
          'active-change': false
        },
        on: {
          'on-change': (value) => {
            params.row.curQuantity = value
            bus.$emit("onChangeQuan", {row: params.row, index: params.index})
          }
        }
      })
      if (params.index == 0) {
        return h('div', [child])
      } else {
        return h('div', params.row.maxQuantity)
      }
    }
  }
mounted() {
    this.$bus.$on("onChangeQuan",({row, index}) => this.onChangeQuan(row, index));
  },
 onChangeQuan(row, index) {
  this.list.data[index] = row;
},

input

h("Input", {
  props: {
    value: params.row.money,
    type: "number"
  },
  on: {
    "on-change"(event) {
      params.row.money = event.target.value; // 这里对input的数据双向绑定
    },
    "on-enter": () => {
      console.log('回车事件');
      }
    }
  }
})