使用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将不被渲染）

 

版权声明：本文为weichen913原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/weichen913/p/iview.html