iview之——table中嵌套input、select等

使用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设置了相关属性和绑定事件

那么如下图又该如何实现呢：

代码如下：

 <template>
     <div class="meeting">
         <Table border :columns="columns" :data="data" :height="tableHeight"></Table>
     </div>
 </template>

 <script>
     export default {
         name: "meeting",
         data() {
　　　　　　　　　 let t = this
             return {
                 tableHeight:'550',
                 columns: [
                     {
                         title: '责任人',
                         key: 'associated',
                         width: 100,
                         align: 'center',
                     },
                     {
                         title: '预计工时',
                         key: 'attendee',
                         width: 100,
                         align: 'center',
                         render:(h,params) => {
                             return h('Input',{
                                 props: {
                                     value:'',
                                     size:'small',
                                 },
                                 on: {
                                     input: (val) => {
                                         t.data[params.index].estimateTime = val
                                     }
                                 },
                             })
                         }
                     },
                     {
                         title: '实际工时',
                         key: 'state',
                         width: 100,
                         align: 'center',
                         render:(h,params) => {
                             return h('Input',{
                                 props: {
                                     value:'',
                                     size:'small',
                                 },
                                 on: {
                                     input: (val) => {
                                         t.data[params.index].actualTime = val
                                     }
                                 },

                             })
                         }
                     },
                     {
                         title: 'WorkHover状态',
                         key: 'action',
                         width: 150,
                         align: 'center',
                         render: (h, params) => {
                             return h('Select',{
                                     props:{
                                     },
                                     on: {
                                         'on-change':(event) => {
                                             this.data[params.index].volumeType = event;
                                         }
                                     },
                                 },
                                 params.row.action.map((item) =>{
                                     return h('Option', {
                                         props: {
                                             value: item.value,
                                             label: item.name
                                         }
                                     })
                                 })
                             )
                         }
                     },

                 ],
                 data: [
                     {
                         associated: '123',
                         action:[
                             {
                                 value:0,
                                 name:'select A'
                             },
                             {
                                 value:1,
                                 name:'select B'
                             },
                         ]
                     },
                     {
                         associated: '123',
                         action:[
                             {
                                 value:0,
                                 name:'select A'
                             },
                             {
                                 value:1,
                                 name:'select B'
                             },
                         ]
                     },
                 ],
             }
         },
         methods: {}
     };
 </script>

讲解：

这里是在table组件中嵌入了iview的input和select组件

值得注意的是，1、on是table的触发事件，不是table内嵌套组件的触发事件，2、对于select组件，通过map函数就可以代替v-for的渲染（注：如果数据中的value值为空，select将不被渲染）