使用iview在table中嵌入button是比較常見的需求，但是在table中嵌入input或者select你是否考慮過呢？本文用例項介紹input和select在table中的巢狀。

理解table如何巢狀input、select首先要理解vue的render函式可以參考：vue render函式介紹。當然，不理解直接Ctrl + C也是可以使用的 ^_^

在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                             ]);
23                         }
 

由文件得知，table元件提供一個api render函式，可以自定義渲染當前列，包括渲染自定義元件，它基於 Vue 的 Render 函式。

引數解讀：

h:  vue  Render函式的別名（全名 createElement）即 Render函式

params： table 該行內容的物件

props：設定建立的標籤物件的屬性

style：設定建立的標籤物件的樣式

on：為建立的標籤繫結事件

所以程式碼中的render函式，即建立的一個div中包裹一個button按鈕，同時給button設定了相關屬性和繫結事件 

那麼如下圖又該如何實現呢：

程式碼如下：

1 <template
 
>
2     <div class="meeting">
3         <Table border :columns="columns" :data="data" :height="tableHeight"></Table>
4     </div>
5 </template>

  1 <script>
  2     export default {
  3         name: "meeting",
  4         data() {　　　　　　　　　 let t = this
  5             return
 
 {
  6                 tableHeight:'550',
  7                 columns: [
  8                     {
  9                         title: '責任人',
 10                         key: 'associated',
 11                         width: 100,
 12                         align: 'center',
 13                     },
 14                     {
 15                         title: '預計工時',
 16                         key: 'attendee',
 17                         width: 100,
 18                         align: 'center',
 19                         render:(h,params) => {
 20                             return h('Input',{
 21                                 props: {
 22                                     value:'',
 23                                     size:'small',
 24                                 },
 25                                 on: {
 26                                     input: (val) => {
 27                                         t.data[params.index].estimateTime = val
 28                                     }
 29                                 },
 30                             })
 31                         }
 32                     },
 33                     {
 34                         title: '實際工時',
 35                         key: 'state',
 36                         width: 100,
 37                         align: 'center',
 38                         render:(h,params) => {
 39                             return h('Input',{
 40                                 props: {
 41                                     value:'',
 42                                     size:'small',
 43                                 },
 44                                 on: {
 45                                     input: (val) => {
 46                                         t.data[params.index].actualTime = val
 47                                     }
 48                                 },
 49 
 50                             })
 51                         }
 52                     },
 53                     {
 54                         title: 'WorkHover狀態',
 55                         key: 'action',
 56                         width: 150,
 57                         align: 'center',
 58                         render: (h, params) => {
 59                             return h('Select',{
 60                                     props:{
 61                                     },
 62                                     on: {
 63                                         'on-change':(event) => {
 64                                             this.data[params.index].volumeType = event;
 65                                         }
 66                                     },
 67                                 },
 68                                 params.row.action.map((item) =>{
 69                                     return h('Option', {
 70                                         props: {
 71                                             value: item.value,
 72                                             label: item.name
 73                                         }
 74                                     })
 75                                 })
 76                             )
 77                         }
 78                     },
 79 
 80                 ],
 81                 data: [
 82                     {
 83                         associated: '123',
 84                         action:[
 85                             {
 86                                 value:0,
 87                                 name:'select A'
 88                             },
 89                             {
 90                                 value:1,
 91                                 name:'select B'
 92                             },
 93                         ]
 94                     },
 95                     {
 96                         associated: '123',
 97                         action:[
 98                             {
 99                                 value:0,
100                                 name:'select A'
101                             },
102                             {
103                                 value:1,
104                                 name:'select B'
105                             },
106                         ]
107                     },
108                 ],
109             }
110         },
111         methods: {}
112     };
113 </script>

講解：

這裡是在table元件中嵌入了iview的input和select元件

值得注意的是，1、on是table的觸發事件，不是table內巢狀元件的觸發事件，2、對於select元件，通過map函式就可以代替v-for的渲染（注：如果資料中的value值為空，select將不被渲染）