Vue-表格组件封装

封装代码：

<!-- 
    * @Descripttion：表格组件-->
<template>
    <div class='YxkTable'>
        <el-table :data="data" v-bind="tableBind" v-on="this.$listeners">
            <ELTableColumn v-for="(item, index) in column" :key="index" :column="item">
                <!-- 自定义表头/内容 slot -->
                <template v-if="item.slotsHeader" v-slot:Header="scope">
                    <slot :name="item.slots" :scope="scope">
                        {{item.label}}
                    </slot>
                </template>
                <template v-if="item.slots" v-slot:[item.slots]="scope">
                    <slot :name="item.slots" :scope="{$index: index, ...scope}">
                        {{scope.row[item.prop]}}
                    </slot>
                </template>
            </ELTableColumn>
        </el-table>
    </div>
</template>

<script>
    import {
        TableColumn
    } from 'element-ui'
    // defalut el-table
    const tableDefault = {
        border: true,
        size: 'medium',
        'header-cell-style': {
            color: '#333',
            background: '#F5F7FA',
            'font-size': '12px'
        },
        'cell-style': {
            'font-size': '12px'
        }
    }
    // default el-table-column
    const tableColumnDefault = {
        resizable: true,
        'show-overflow-tooltip': true
    }
    // render
    const ELTableColumn = {
        props: {
            column: {
                type: Object
            }
        },
        render(createElement) {
            // 插槽
            const createScopedSlots = (slot, params) => {
                let scopedSlots = {}
                // 表头slots
                if (params.slotsHeader) {
                    scopedSlots = {
                        header: scope => {
                            return this.$scopedSlots.Header(scope)
                        }
                    }
                }
                // 自定义内容slots
                if (slot && !params.slotsHeader) {
                    Object.assign(scopedSlots, {
                        default: scope => {
                            if (this.$scopedSlots[slot]) {
                                return this.$scopedSlots[slot](scope)
                            }
                        }
                    })
                }
                return {
                    scopedSlots
                }
            }
            const createNode = params => {
                // ele
                let ele = params.ele || TableColumn
                // 参数
                let props = {
                    attrs: {
                        ...tableColumnDefault,
                        ...params
                    },
                    on: {}
                }
                // on
                if (params.on) {
                    Object.assign(props.on, params.on)
                }
                // childNodes
                let childNodes = []
                if (params.children) {
                    childNodes = params.children.map(item => {
                        return createNode(item)
                    })
                }
                // slot
                if (params.slots) {
                    params.slotsHeader = params.slots.includes('header')
                    Object.assign(props, createScopedSlots(params.slots, params))
                }
                return createElement(ele, props, childNodes)
            }
            return createNode(this.column)
        },
    }

    export default {
        name: 'YxkTables',
        componentName: 'YxkTables',
        props: {
            data: {
                type: Array
            },
            column: {
                type: Array
            }
        },
        components: {
            ELTableColumn
        },
        data() {
            return {}
        },
        methods: {},
        computed: {
            tableBind() {
                return Object.assign(tableDefault, this.$attrs)
            }
        },
        watch: {},
        created() {},
        mounted() {}
    }
</script>

<style lang='scss'>
    .YxkTable {
        padding: 20px;
        background: #fff;

        .el-button {
            font-size: 12px;
        }

        .el-link {
            font-size: 12px;
        }
    }
</style>

示例：

 

 

参数说明：

    2、使用：
        <YxkTable :data="tableData" :column="tableColumn">
            // 插槽(可选)
        </YxkTable>
    3、参数：
        {
           data: '',         // 表格数据，Array
           column: '',       // 表格表头数据，Array 
           ...               // el-table 属性、方法、事件 (https://element.eleme.cn/#/zh-CN/component/table)
        }

        column: [{
            prop: '',        // 对应列内容的字段名
            label: '',       // 显示的标题
            handler: [],     // el-table-column 方法、事件
            slots: '',       // 插槽名称
            ...              // el-table-column 属性 (https://element.eleme.cn/#/zh-CN/component/table)
        }]
    4、插槽
        <template v-slot:插槽名称>...</template>
        或
        <template v-slot:插槽名称="{ scope }">...</template>
    5、事件
        el-table 方法、事件
    6、示例
        更多示例搜索 @components/common/YxkTable/YxkTable
    7、插件（已安装）
        npm install element-ui -S