elementUI对table表格二次封装(slot支持某一列自定义；支持通过filter函数处理行数据；支持通过func判断操作列某个功能按钮是否展示)

<template>
    <div>
        <el-table
            v-loading="loading"
            :size="size"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            width="100%"
            @selection-change="handleSelectionChange"
            ref="multipleTable"
        >
            <el-table-column v-if="multipleSelectionAble" :selectable="selectable" type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号" width="70" v-if="showSortId"></el-table-column>
            <el-table-column
                v-for="(column,index) in tableProps"
                :key="index"
                :prop="column.prop"
                :label="column.label"
                :width="widthValue(column.width, column)"
                :min-width="widthValue(column.minWidth)"
            >
                <template slot-scope="scope">
                    <span
                        v-if="!column.slot"
                    >{{ column.filter ? column.filter(scope.row[column.prop]) : scope.row[column.prop] }}</span>
                    <slot v-else :name="column.prop" v-bind:row="scope.row"></slot>
                </template>
            </el-table-column>
            <el-table-column
                v-if="actions && actions.length > 0"
                label="操作"
                fixed="right"
                :min-width="widthValue(actionWidth)"
            >
                <template slot-scope="scope">
                    <template v-for="(action,index) in actions">
                        <el-button
                            v-if="action.judgeShow?action.judgeShow(scope.row):true"
                            :key="index"
                            @click="onAction(action.handler,scope.row,scope.$index)"
                            type="text"
                            size="mini"
                        >{{action.name}}</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="pageData"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.pageNum"
            :page-sizes="pageSizes"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
        ></el-pagination>
    </div>
</template>

<script>
export default {
    name: 'elTables',
    props: {
        /** table表格数据 */
        tableData: { type: Array, default () { return [] } },
        /** table表格的props。 prop label必填 filter是过滤器 slot是使用插槽
         * 格式例子：[{ prop: 'name', label: '名称', slot: true,  minWidth: '100', width: '100', filter: function(){}}]
         *  slot 使用
         * <el-tables :tableProps="tableProps" :tableData="tableData" :actions="actions" :loading="loading" :actionWidth="90" :showSortId="true"
            @action="onAction">
                <template v-slot:字段名称="slotProps">     // 字段名称  是使用slot一列的prop字段名称 比如 prop: 'name' 则取name
                    行内容读取： slotProps.row.字段名称
                </template>
            </el-tables>
         */
        tableProps: { type: Array },
        /** 数据加载时的loading */
        loading: { type: Boolean, default () { return false } },
        /**
         * 通常是操作那一列
         * 格式[{ name: '查看', handler: 'onView', judgeShow: function (row) {}}]
         * handler 自定义回调， judgeShow 函数，返回true,false, 用于根据条件判断是否展示
         */
        actions: { type: Array, default () { return [] } },
        /** 操作那一列宽度 */
        actionWidth: {},
        /** 是否多选可选 */
        multipleSelectionAble: { type: Boolean, default () { return false } },
        selectable: { type: Function, default () { return function (row, index) { return true } } },
        /** 是否展示序号 */
        showSortId: { type: Boolean, default () { return false } },
        /** 行号 */
        tableIndex: { type: Number, default () { return 0 } },
        /** table的size */
        size: { type: String, default () { return 'small' } },
        /** 分页信息，如果为null则不展示分页
         * 有值的话格式{
            * pageNum: 1,
            * pageSize: 10,
            * total: 10
         * }
         */
        pageData: {
            type: Object,
            value: null
        }
    },
    data () {
        return {
            pageSizes: [2, 5, 10, 20, 50, 100] // 根据自己系统自定义
        }
    },
    methods: {
        handleSizeChange (val) {
            let { pageNum, pageSize, total } = this.pageData
            pageNum = val > pageSize && val * (pageNum - 1) >= total ? 1 : pageNum
            this.$emit('pagInfo', {
                ...this.pageData,
                pageNum: pageNum,
                pageSize: val
            })
        },
        handleCurrentChange (val) {
            this.$emit('pagInfo', {
                ...this.pageData,
                pageNum: val
            })
        },
        widthValue (width, column) {
            return width && width - 0 > 0 ? width : ''
        },
        onAction (handler, row, index) {
            this.$emit('action', handler, row, index, this.tableIndex)
        },
        handleSelectionChange (val) {
            this.$emit('multipleSelection', val)
        }
    }
}
</script>

<style scoped>
</style>

使用

<el-tables :tableProps="tableProps" :tableData="tableData" :actions="actions" :loading="loading" :actionWidth="90" @action="onAction" :pageData="pageData" @pagInfo="pagInfo">
</el-tables>

部分参数格式

操作列回调和使用