使用場景

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',
        },
    ];