生活随笔
收集整理的這篇文章主要介紹了
在iview的Table中添加Select（render）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先對Render進行分析，在iview官方的文檔中，找到了table插入Button的例子：
?
[javascript]?view plaincopy
{??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的結構可以把這段代碼簡化一下，寫為：
?
?
[javascript]?view plaincopy
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組件：
?
[javascript]?view plaincopy
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的第三個參數為一個對象數組，我們可不可以使用便利數據數組的方式生成呢？（廢話）
直接上代碼，在數組的地方寫入：
?
[javascript]?view plaincopy
this.volumeTypes.map(function(type){??????return?h('Option',?{??????????props:?{value:?type}??????},?type);??})??
其中，this.volumeTypes就是我們的列數據，當然，這是最基本的綁定的寫法，如果想使用對象數組，自行研究，很easy的~
?
這是我們的最終結果：
?
[javascript]?view plaincopy
{??????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。
轉載于:https://www.cnblogs.com/liubingboke/p/8745518.html
總結
以上是生活随笔為你收集整理的在iview的Table中添加Select（render）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
