iview Table组件中Input数据双向绑定

使用场景

Table表格组件中的每一行都有文本输入框或者日期选择框,那么该如何对其中的输入框或日期选择框进行数据绑定呢?

render自定义渲染

iview Table组件中提供了render自定义渲染列函数,使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引.

实例

<Table stripe ref="currentRowTable" :columns="columns" :data="data"></Table>

	columns: [
        {
            type: 'index',
            title: '序号',
            width: 60,
            align: 'center',
        },
        {
            title: '姓名',
            key: 'name',
            align: 'center',
            render: (h, params) => {
                return h('Input', {
                    props: {
                        type: 'text',
                        value: this.data[params.index].name,
                    },
                    on: {
                        'on-blur': (event: any) => {
                            this.data[params.index].name = event.target.value;
                        },
                    },
                });
            },
        },
        {
            title: '出生年月',
            key: 'birthday',
            align: 'center',
            render: (h, params) => {
                return h('DatePicker', {
                    props: {
                        type: 'month',
                        value: this.data[params.index].birthday,
                    },
                    on: {
                        'on-change': (event) => {
                        	// event 即为日期字符串值
                            this.data[params.index].birthday = event;
                        },
                    },
                });
            },
        },
    ],
    
    data: [
        {
            name: 'test',
            birthday: '1998-06',
        },
    ];