轉自：http://blog.csdn.net/dead_rabbit6_0/article/details/79239206

僅用於學習，違者必究！！！

iview的新手文件寫的並不怎麼樣，把鍋都推給了vue，這一天的工作卡在了在Table中加入Select的問題上，再次記錄學習過程：

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

1. {  
2. title: 'Action',  
3. key: 'action',  
4. width: 150,  
5. align: 'center',  
6. render: (h, params) => {  
7.     return h('div', [  
8.         h('Button', {  
9.             props: {  
10.                 type: 'primary',  
11.                 size: 'small'
12.             },  
13.             style: {  
14.                 marginRight: '5px'
15.             },  
16.             on: {  
17.                 click: () => {  
18.                     this.show(params.index)  
19.                 }  
20.             }  
21.         }, 'View'),  
22.         h('Button', {  
23.             props: {  
24.                 type: 'error',  
25.                 size: 'small'
26.             },  
27.             on: {  
28.                 click: () => {  
29.                     this.remove(params.index)  
30.                 }  
31.             }  
32.         }, 'Delete')  
33.     ]);  
34. }  

1. render: (h, params) => {  
2.     return h('Button', {  
3.             props: {  
4.                 type: 'primary',  
5.                 size: 'small'
6.             },  
7.             style: {  
8.                 marginRight: '5px'
9.             },  
10.             on: {  
11.                 click: () => {  
12.                     this.show(params.index)  
13.                 }  
14.             }  
15.         }, 'View'),  
16.     );  
17. }  

好，現在開始寫Table元件中的Select元件：

1. render: (h, params) => {  
2.     return h('Select', {  
3.         props:{  
4.             value: this.data[params.index].volumeType,  
5.         },  
6.         on: {  
7.             'on-change':(event) => {  
8.                 this.data[params.index].volumeType = event;  
9.             }  
10.         },  
11.     },  
12.     [  
13.         h('Option',{  
14.             props: {  
15.                 value: '1'
16.             }  
17.         },'option1'),  
18.         h('Option',{  
19.             props: {  
20.                 value: '2'
21.             }  
22.         },'option2')  
23.     ]  
24.     );  
25. },  

好，現在我們實現了基本的渲染。現在我們實現動態改變option的內容，與元件的data結合起來，畢竟當資料量大的時候，總不能一個一個的寫上去。

觀察render的第三個引數為一個物件陣列，我們可不可以使用便利資料陣列的方式生成呢？（廢話）

直接上程式碼，在陣列的地方寫入：

1. this.volumeTypes.map(function(type){  
2.     return h('Option', {  
3.         props: {value: type}  
4.     }, type);  
5. })  

這是我們的最終結果：

1. {  
2.     title: '卷型別',  
3.     key: 'volumeType',  
4.     align: 'center',  
5.     render: (h, params) => {  
6.         return h('Select', {  
7.             props:{  
8.                 value: this.data[params.index].volumeType,  
9.             },  
10.             on: {  
11.                 'on-change':(event) => {  
12.                     this.data[params.index].volumeType = event;  
13.                 }  
14.             },  
15.         },  
16.         this.volumeTypes.map(function(type){  
17.             return h('Option', {  
18.                 props: {value: type}  
19.             }, type);  
20.         })  
21.         );  
22.     },  
23. },    

****************************************************************************************************

以下是本人的程式碼，僅供參考

效果如下：

渲染input元件：