vue二次封装表格组件

<template>
    <div>
        <el-table ref="dataTable" :stripe="stripe" :show-overflow-tooltip="tooltip" :header-cell-style="headerStyle"
            :border="isBorder" :data="tableData" style="width: 100%">
            <el-table-column type='index' header-align='center' align='center' label='序号' width='60'></el-table-column>
            <template v-for="(item, idx) in tableColumn">
                <!-- columnType 是否开启插槽 -->
                <el-table-column v-if="item.columnType == 'slot'" :key="idx" :prop="item.prop" :label="item.label"
                    :width="item.width" :align="align">
                    <template slot-scope="{ row }">
                        <!-- <div>{{row}}</div> -->
                        <slot :name="item.slotName" :data="row" />
                    </template>
                </el-table-column>
                <!-- 默认显示文本 -->
                <el-table-column v-else :prop="item.prop" :label="item.label" :key="idx" :width="item.width"
                    :align="align">
                </el-table-column>
            </template>
        </el-table>
        <!-- <ListfooterPagination
      ref="pagination"
      @change="paginationChange"
    ></ListfooterPagination> -->
    </div>
</template>

<script>
    export default {
        name: "mTable",
        props: {
            // table数据
            tableData: {
                type: Array,
                default: () => [],
            },
            // tableColumn数据
            tableColumn: {
                type: Array,
                default: () => [],
            },
            // 边框
            isBorder: {
                type: Boolean,
                default: false,
            },
            // 对齐方式 left/center/right
            align: {
                type: String,
                default: "center",
            },
            // 文本过长显示 提示信息
            tooltip: {
                type: Boolean,
                default: true,
            },
            headerStyle: {
                type: Object,
                default: () => {
                    return {
                        background: "#f5f7fa",
                        color: "#666"
                    };
                },
            },
            // 是否为斑马纹 table
            stripe: {
                type: Boolean,
                default: false,
            },
        },
        computed: {
            dataTable() {
                return this.tableData;
            },
        },
        methods: {
            // 点击分页
            paginationChange(e) {
                e = JSON.parse(JSON.stringify(e));
                this.$emit("change", e);
            },
            // total
            getTotal(m) {
                console.log(m, "147589");
                this.$refs.pagination.getTotal(m);
            },
        },
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

使用方法

<!-- 使用方法 -->
<!-- <myTable ref="mytableRef" v-loading='dataListLoading' :tableData="dataList" :tableColumn='tableColumn'>
            <template v-slot:operation="{data}">
                <el-button type='text' size='small' @click='addOrUpdateHandle(data.id)'>编辑</el-button>
                <el-button type='text' size='small' @click='deleteHandle(data.id)'>删除</el-button>
            </template>
            <template v-slot:status="{data}">
                <el-tag type="success">标签二</el-tag>
            </template>
        </myTable> -->
<!-- tableColumn: [
        {
            prop: 'money',
            label: '金额',
            width: '',
        },
        {
            prop: 'createUserName',
            label: '缴纳人',
            width: '',
        },
        {
            prop: 'recordTime',
            label: '缴纳时间',
            width: '',
        }, {
            columnType: 'slot',
            label: '状态',
            slotName: 'status'

        }, {
            columnType: 'slot',
            label: '操作',
            slotName: 'operation'

        },
    ], -->