iview 的table表格组件怎么使单元格可编辑和输入

iview的官方文档没有给出可以编辑表格的属性，但是有时候我们有这个需求，希望直接在表格上改数据，就需要编辑功能了

表格的列定义中，在需要编辑的字段下使用render函数

template表格组件

<Table border :data="detailData.vos" :columns="table.cols" :loading="table.loading"></Table>

data中定义table对象

  table: {
        cols: [
          {
            title: '商品序号',
            key: 'gno',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              //使用抽离出的getRender函数，来执行后续的render行为
                return h('Input', this.getRender(h, params, 'gno','input')); 
            }
          },
          {
            title: '操作类型',
            key: 'opType',
            minWidth: 120,
            align: 'center',
            render: (h, params) => {
                return h('Select', this.getRender(h, params, 'opType','select'),
                this.porttList.map(function (type){  //下拉框的选项
		           return h('Option',{
		               props:{
		                   value: type.value,
		                   key: type.label,
		               }
		           },type.label);
		        }));
            }
          },
       ]
    }

抽离出一个render的函数

getRender(h, params, key,types){
           return{
               props: {
                        value: params.row[key]
                    },
                    class:"input-table",  // 定义一个类来控制单元格的样式
                    style:{
                        width:'100%!important'
                    },
                    on:{
                        'on-change':(event) => {
                           //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值，注意：与下拉框取值不一样
                           if(types == 'input'){
                          		 this.detailData.vos[params.index][params.column.key] = event.currentTarget.value; 
                           }else if(types == 'select'){
                             //下拉框选择获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                          		 this.detailData.vos[params.index][params.column.key] = event
                           }
                            
                        }
                    }
           }
      },

选择器option

   porttList:[
        {
            value: '1',
            label:'深圳',
        },{
            value: '2',
            label:'杭州',
        }
    ],

效果图