基于ElementUi封装table组件——包含表头工具栏、多级表头、合并行、分页

表格组件WTable.vue

<template>
    <div class="wTable">
        <!-- 头部工具栏 -->
        <div v-if="tools && tools.length>0 && tools[0].label" class="toolBar">
            <template v-for="(tool, key) in tools">
                <!-- 具名插槽 -->
                <slot v-if="tool.slot" :name="tool.slot" />
                <el-button
                    v-else
                    :key="key"
                    :type="tool.type"
                    :size="tool.size"
                    :plain="tool.plain"
                    :round="tool.round"
                    :circle="tool.circle"
                    :icon="tool.icon"
                    :style="tool.style"
                    :disabled="tool.disabled"
                    @click.native.prevent="tool.method()"
                >
                    {{ tool.label }}
                </el-button>
            </template>
        </div>
        <!-- 表格 -->
        <el-table
            id="wTable"
            ref="wTable"
            v-loading.wTable="woptions.loading"
            v-tableDrag 
            :data="data"
            :height="tHeight"
            :stripe="woptions.stripe"
            :border="woptions.border"
            :fit="woptions.fit"
            :span-method="spanMethod"
            :row-key="rowKey"
            @selection-change="handleSelectionChange"
        >
            <!-- 多选框 -->
            <el-table-column v-if="woptions.mutiSelect" :reserve-selection="true" type="selection" :selectable="woptions.checkSelect" style=" 55px;" align="center" />
            <!-- 序号 -->
            <el-table-column v-if="woptions.index" label="序号" type="index" style=" 55px;" align="center" />
            <!-- 数据列 -->
            <template v-for="(column, index) of columns">
                <!-- 如过有嵌套，递归多级表头 -->
                <template v-if="column.children && column.children.length > 0">
                    <WColumn :key="index" :column="column" />
                </template>
                <!-- 没有正常显示 -->
                <template v-else>
                    <!-- 具名插槽 -->
                    <slot v-if="column.slot" :name="column.slot" />
                    <el-table-column
                        v-else-if="!column.isHide"
                        v-slot="scope"
                        :key="index"
                        :prop="column.prop"
                        :label="column.label"
                        :type="column.type"
                        :min-width="column.minWidth"
                        :width="column.width"
                        :align="column.align"
                        :fixed="column.fixed"
                        :show-overflow-tooltip="column.tooltip"
                        :class-name="column.class"
                        :sortable="column.sort"
                    >
                        <!-- 是否需要特殊处理 -->
                        <template v-if="column.formatter">
                            <span v-html="column.formatter(scope.row, column)" />
                        </template>
                        <template v-else>
                            <!-- 正常显示 -->
                            <span>{{ scope.row[column.prop] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </template>
        </el-table>
        <!-- 分页 -->
        <div v-if="isPagination" class="pagination">
            <el-pagination
                background
                :current-page="wpagination.currentPage"
                :page-sizes="wpagination.pageArr"
                :page-size="wpagination.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
/**
 * 使用方法：
 * 通用的可参考 views/businessManage/businessList
 * 多级表头可参考 views/dingdang/privacyCallInfo
 * 合并行可参考 views/codeManage/routeTest
 */
import WColumn from './WColumn'
export default {
    name: 'WTable',
    components: { WColumn },
    props: {
        // 头部按钮组
        tools: {
            type: Array,
            default() {
                return [
                    {method() {}}
                ]
            }
        },
        // 数据
        data: {
            type: Array,
            requre: true,
            default() {
                return []
            }
        },
        // 合并行
        spanMethod: Function,
        // 多选回显key
        rowKey: {
            type: String,
            default: 'id'
        },
        /**
         * 表格默认配置
         * height: 表格高度
         * stripe: 是否为斑马纹 table
         * border: 是否带有纵向边框
         * fit: 列的宽度是否自撑开
         * mutiSelect: 是否开启多选
         * loading: 添加loading
         */
        options: {
            type: Object,
            default() {
                return {
                    stripe: true,
                    border: false,
                    fit: true,
                    mutiSelect: false,
                    loading: false,
                    index: true
                }
            }
        },
        // 表格高度
        tHeight: {
            type: Number,
            default: 200
        },
        /**
         * 列集合
         * prop: 列字段
         * label: 列名称
         * align: 文本显示位置
         *  列固定宽度，例：200
         * minWidth: 自适应宽度 例： 200 或 20%
         * type: 类型
         * formatter: 特殊处理
         * slot: 特殊列名称
         * isHide: 是否隐藏列，用于动态展示列
         * tooltip: 超出是否...
         * class: 列的class
         * sort: 是否排序
         */
        columns: {
            type: Array,
            default() {
                return []
            },
            require: true
        },
        // 数据总数
        total: {
            type: Number,
            default: 0
        },
        // 是否显示分页
        isPagination: {
            type: Boolean,
            default: true
        },
        /**
         * 分页参数
         * pagesize:每页显示的条数
         * currentPage:当前页码
         * pageArr: 显示多少条集合
         * background: 是否要背景
         */
        pagination: {
            type: Object,
            default() {
                return {
                    pagesize: 10,
                    background: true,
                    currentPage: 1,
                    pageArr: [10, 20, 50, 100]
                }
            }
        }
    },
    data() {
        return {
            // 默认的表格配置
            woptions: {
                stripe: true,
                border: false,
                fit: true,
                mutiSelect: false,
                loading: false,
                index: true,
                checkSelect() {
                    return true
                }
            },
            // 默认的分页配置
            wpagination: {
                pagesize: 10,
                background: true,
                currentPage: 1,
                pageArr: [10, 20, 50, 100]
            }
        }
    },
    created() {
        // 扩展配置，目的是引用组件不用把配置全写一遍
        this.woptions = Object.assign({}, this.woptions, this.options)
        this.wpagination = Object.assign({}, this.wpagination, this.pagination)
    },
    methods: {
        // 表格多选
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val)
        },
        // 选择每页展示的条数
        handleSizeChange(size) {
            this.$emit('handleSizeChange', size)
        },
        // 点击第几页
        handleCurrentChange(currentPage) {
            this.$emit('handleCurrentChange', currentPage)
        }
    }
}
</script>

<style lang="scss" scoped>
.wTable {
    box-shadow: 0 0 10px #eee;
    .toolBar {
        padding: 10px;
        overflow: hidden;
    }
    .pagination {
        padding: 30px 0;
        text-align: center;
    }
    #table {
        width: 100%;
    }
}
</style>

多级表头递归子组件WColumn.vue

<template>
    <el-table-column
        v-if="!column.isHide"
        :prop="column.prop"
        :label="column.label"
        :type="column.type"
        :min-width="column.minWidth"
        :width="column.width"
        :align="column.align"
        :fixed="column.fixed"
        :show-overflow-tooltip="column.tooltip"
        :class-name="column.class"
        :sortable="column.sort"
    >
        <!-- 数据列 -->
        <template v-for="(item, key) of column.children">
            <template v-if="item.children && item.children.length > 0">
                <WColumn :key="key" :column="item" />
            </template>
            <template v-else>
                <!-- 具名插槽 -->
                <slot v-if="item.slot" :name="item.slot" />
                <el-table-column
                    v-else-if="!item.isHide"
                    v-slot="scope"
                    :key="key"
                    :prop="item.prop"
                    :label="item.label"
                    :type="item.type"
                    :min-width="item.minWidth"
                    :width="item.width"
                    :align="item.align"
                    :fixed="item.fixed"
                    :show-overflow-tooltip="item.tooltip"
                    :class-name="item.class"
                    :sortable="item.sort"
                >
                    <!-- 是否需要特殊处理 -->
                    <template v-if="item.formatter">
                        <span v-html="item.formatter(scope.row, item)" />
                    </template>
                    <template v-else>
                        <!-- 正常显示 -->
                        <span>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
            </template>
        </template>
    </el-table-column>
</template>

<script>
export default {
    name: 'WColumn',
    props: {
        column: {
            type: Object,
            default() {
                return {}
            }
        }
    }
}
</script>

自定义点击表格横向滚动指令v-tableDrag

main.js将directices.js引入即可

import Vue from 'vue'

Vue.directive('tableDrag', {
    inserted: function(el) {
        el = el.getElementsByClassName('el-table__body-wrapper')[0]
        el.style.cursor = 'grab'
        el.onmousedown = function() {
            let gapX = event.clientX
            let startX = el.scrollLeft
            document.onmousemove = function(e) {
                let x = e.clientX - gapX
                el.scrollLeft = startX - x
                return false
            }
            document.onmouseup = function() {
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
})