在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。