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將不被渲染）