iview可编辑表格 表格行添加输入框、选择器
表格的列定义中，在需要编辑的字段下使用render函数
Input输入框
{
title: '控制器名称',
key: 'conName',
align: 'center',
render: (h, params) => {
return h('Input', {
props: {
value:params.row.conName
},
on:{
'on-change':(event) => {
this.addPoint.tableData[params.index][params.column.key] = event.currentTarget.value
; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
}
}
});
}
}
Selete选择器
{
title: '点位',
key: 'pointId',
align: 'center',
render: (h, params) => {
return h('Select', {
props: {
value:params.row.pointId
},
on:{
'on-change':(event) => {
this.addPoint.tableData[params.index][params.column.key] = event
; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
}
}
},
this.addPoint.pointList.map(function (type){
return h('Option',{
props:{
value: type.value,
key: type.label,
}
},type.label
);
})
);
}
}
特别注意：selete的on-change事件中的参数即为改变的值，与input的event.data(最后操作的字符)区别！！！
选择器option
addPoint:{
pointList:[
{
value: '1',
label:'点位1',
},{
value: '2',
label:'点位2',
},{
value: '3',
label:'点位3',
}
],
}
效果图
