表格的列定义中,在需要编辑的字段下使用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:'杭州',
}
],
效果图: