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

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

template表格组件

<Table border :data="data" :columns="tableColumns" :loading="loading"></Table>

data中定义table对象

  table: {tableColumns: [{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) => {//获取编辑行的index和编辑字段名，对表格数据进行重新赋值，注意：与下拉框取值不一样if(types == 'input'){this.detailData.vos[params.index][params.column.key]= event.currentTarget.value; }else if(types == 'select'){//下拉框选择获取编辑行的index和编辑字段名，对表格数据进行重新赋值this.detailData.vos[params.index][params.column.key] = event}}}}
}

选择器option

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

效果图: