iview实现表格可编辑

iview要实现table可编辑，使用render函数进行渲染，非常简单,希望对大家有所帮助。

一、效果图如下：

二、render函数使用方法

1. h: vue Render函数的别名（全名 createElement）即 Render函数
2. params： table 该行内容的对象
3. props：设置创建的标签对象的属性
4. style：设置创建的标签对象的样式
5. on：为创建的标签绑定事件

三、使用方法

//创建一个表格
<Table border :columns="columns" :data="tableData" height="700"></Table>
//data中定义columns
comColumns:[
//实现select
	{
          key: 'sclx',
          title: '生产类型',
          width: 120,
          render: (h, params) => {
            return h('Select', {        //创建一个select下拉框
              props:{                   //定义select的属性
                placeholder:'生产类型',
                value:this.tableData[params.index].sclx       //初始化给下拉框赋值
              },
              on: {                     //给select添加事件
                  'on-change':(event) => {
                      this.tableData[params.index].sclx = event;      //选择option给value赋值
                  }
              },
            },
              this.sclxList.map((type)=>{          //循环展示下拉框数据   this.sclxList是从后台获取到的数据
                  return h('Option', {
                      props:{
                          value:type.ywzfl,
                          label:type.zfllc
                      }
                  }, type);
              })
            )
          }
        },
//实现input
	{
          key: 'lxdh',
          title: '联系电话',
          width: 100,
          render:(h,params)=>{
            return h('Input',{
              props:{
                placeholder:'联系电话',
                value:this.tableData[params.index].lxdh
              },
              on:{
                'input':(val)=>{
                  this.tableData[params.index].lxdh = val;
                }
              }
            })
          }
        },
//实现日期选择器
	{
          key: 'fhsj',
          title: '发货时间',
          width: 120,
          render: (h, params) => {
            return h('div',[
              h('DatePicker',{
                props:{
                  placeholder:'发货时间',
                  value:this.tableData[params.index].fhsj
                },
                on:{
                  'on-change':(date)=>{
                      this.tableData[params.index].fhsj = date;
                      this.tableData[params.index].isEdit = true;
                  }
                }
              })
            ]);
          }
        },
]