表格通用封装

表格通用封装

<template>
    <div class="table-container">
        <el-table
            ref="tableBase"
            v-loading="loading"
            class="table-wrap"
            :height="tableHeight"
            :data="listData"
            @selection-change="handleSelectionChange"
            @select="select"
        >
            <template v-for="(item, index) in columns">
                <!--复选框（START）-->
                <el-table-column
                    v-if="item.type == 'selection'"
                    :key="index"
                    :selectable="item.selectFn"
                    type="selection"
                    :width="item.width || 60"
                    :align="item.align || 'center'"
                    :fixed="item.fixed"
                />
                <el-table-column
                    v-else
                    :key="index"
                    :prop="item.prop"
                    :label="$t(item.label)"
                    :min-width="100"
                    :width="item.width"
                    :align="item.align || 'center'"
                    :show-overflow-tooltip="item.tooltip === false ? false : true"
                    :fixed="item.fixed"
                >
                    <template slot="header" slot-scope="scope">
                        <template v-if="item.isRenderHeader">
                            <slot name="header" :row="scope.row" :index="scope.$index" />
                        </template>
                        <template v-else>
                            <span>{{ $t(item.label) }}</span>
                        </template>
                    </template>
                    <template slot-scope="scope">
                        <template v-if="item.render">
                            <custom-cell :column="item" :row="scope.row" :render="item.render" :index="scope.$index" />
                        </template>
                        <template v-else-if="item.slot">
                            <slot :name="item.slot" :row="scope.row" :index="scope.$index" />
                        </template>
                        <template v-else>
                            <span>{{ item.format ? item.format(scope.row, item.prop) : scope.row[item.prop] || '-'}}</span>
                        </template>
                    </template>
                </el-table-column>
                <!--复选框（END）-->
            </template>

            <!-- v-for="(item, index) in columns" -->
        </el-table>
        <el-pagination
            v-if="paginationVisible"
            :current-page="currentPage"
            :page-sizes="pageSizeOption"
            :page-size="pageSize"
            layout="sizes, total, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
export default {
    name: '',
    components: {
        customCell: {
            functional: true,
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: { type: Object, default: null }
            },
            render: (h, ctx) => {
                const { row, index, column, render } = ctx.props
                const params = { row, index, column }
                return render(h, params)
            }
        }
    },
    props: {
        columns: {
            type: Array,
            default: () => []
        },
        listData: {
            type: Array,
            default: () => []
        },
        total: {
            type: Number,
            default: 0
        },
        pageSizeOption: {
            type: Array,
            default: () => [10, 20, 50, 100]
        },
        pageSize: {
            type: Number,
            default: 10
        },
        currentPage: {
            type: Number,
            default: 1
        },
        loading: {
            type: Boolean,
            default: false
        },
        // total: {
        //     type: Number,
        //     default: 100
        // },
        paginationVisible: {
            type: Boolean,
            default: true
        },
        tableHeight: {
            type: String,
            default: '100%'
        }
    },
    data() {
        return {
            multipleSelection: []
        }
    },
    computed: {},
    watch: {},
    mounted() {},
    activated() {
        this.doLayout()
    },
    methods: {
        /* 多选 */
        handleSelectionChange(val) {
            this.multipleSelection = val
            this.$emit('selectionChange', val)
        },
        /* pageSize改变 */

        handleSizeChange(val) {
            this.$emit('update:pageSize', val)
            this.$emit('sizeChange', val)
        },
        /* currentPage改变 */

        handleCurrentChange(val) {
            this.$emit('currentChange', val)
        },
        select(selection, row) {
            this.$emit('select', selection, row)
        },

        doLayout() {
            this.$refs.tableBase.doLayout()
        }
    }
}
</script>

<style scoped lang="scss">
.table-container {
    height: 100%;
    ::v-deep {
        .el-table th {
            background-color: #e4e8f1;
        }
        .el-table td,
        .el-table th {
            padding: 8px 0;
        }
        .el-pagination {
            display: flex;
            margin-top: 30px;
            > .el-pagination__sizes {
                margin-right: auto !important;
            }
        }
    }
}
</style>

<style lang="scss">
.el-tooltip__popper {
    max-width: 30%;
}
</style>

引入使用方法

<table-base :table-height="'300'" :columns="columns" :list-data="driversInfo" :pagination-visible="false">

import tableBase from '@/components/TableBase/index.vue'

data() {
    return {
        requiredFields: '',
        columns: [
            {
                label: 'car.management.driver.name',
                prop: 'name'
            },
            {
                label: 'car.management.driver.id',
                prop: 'idNumber'
            },
            {
                label: 'car.management.org',
                prop: 'orgName'
            },
            {
                label: 'car.management.mobileNumber',
                prop: 'mobileNumber'
            }
        ],
    }
},