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

使用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                          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',
                         100,
                        align: 'center',
                    },
                    {
                        title: '预计工时',
                        key: 'attendee',
                         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',
                         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',
                         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将不被渲染）