在iview的Table中添加Select（render）

首先對Render進行分析，在iview官方的文檔中，找到了table插入Button的例子：

 

{
title: 'Action',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
    return h('div', [
        h('Button', {
            props: {
                type: 'primary',
                size: 'small'
            },
            style: {
                marginRight: '5px'
            },
            on: {
                click: () => {
                    this.show(params.index)
                }
            }
        }, 'View'),
        h('Button', {
            props: {
                type: 'error',
                size: 'small'
            },
            on: {
                click: () => {
                    this.remove(params.index)
                }
            }
        }, 'Delete')
    ]);
}

這是Table的表頭定義中的一段，意思是建立兩個按鈕，一個名爲View，一個名爲Delete，在疑惑h是什麼的時候，看到網上一哥們的回答頓時茅廁頓開，問題地址，render參數中h能夠看作是 createElement。能夠看出上面的例子大概表現爲一個div中包含兩個Button，又根據生成Button的結構能夠把這段代碼簡化一下，寫爲：

 

 

render: (h, params) => {
    return h('Button', {
            props: {
                type: 'primary',
                size: 'small'
            },
            style: {
                marginRight: '5px'
            },
            on: {
                click: () => {
                    this.show(params.index)
                }
            }
        }, 'View'),
    );
}

在學vue的時候，有看到父組件和子組件之間的交互使用了props，咱們在iview的文檔中，看到Button的API包括type、size，由此可知，props能夠直接聲明子組件的API值內容，on中寫的天然就是它的觸發事件了。

 

好，如今開始寫Table組件中的Select組件：

 

render: (h, params) => {
    return h('Select', {
        props:{
            value: this.data[params.index].volumeType,
        },
        on: {
            'on-change':(event) => {
                this.data[params.index].volumeType = event;
            }
        },
    },
    [
        h('Option',{
            props: {
                value: '1'
            }
        },'option1'),
        h('Option',{
            props: {
                value: '2'
            }
        },'option2')
    ]
    );
},

能夠看到效果：

 

好，如今咱們實現了基本的渲染。如今咱們實現動態改變option的內容，與組件的data結合起來，畢竟當數據量大的時候，總不能一個一個的寫上去。

觀察render的第三個參數爲一個對象數組，咱們可不能夠使用便利數據數組的方式生成呢？（廢話）

直接上代碼，在數組的地方寫入：

 

this.volumeTypes.map(function(type){
    return h('Option', {
        props: {value: type}
    }, type);
})

其中，this.volumeTypes就是咱們的列數據，固然，這是最基本的綁定的寫法，若是想使用對象數組，自行研究，很easy的~

 

這是咱們的最終結果：

 

{
    title: '卷類型',
    key: 'volumeType',
    align: 'center',
    render: (h, params) => {
        return h('Select', {
            props:{
                value: this.data[params.index].volumeType,
            },
            on: {
                'on-change':(value) => {
                    this.data[params.index].volumeType = value;
                }
            },
        },
        this.volumeTypes.map(function(type){
            return h('Option', {
                props: {value: type}
            }, type);
        })
        );
    },
},

end。