iview可编辑表格 表格行添加输入框、选择器

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',
        }
    ],
}
效果图

在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值