admin-govern/src/components/table/index.vue

<template>
    <el-table
        ref="tableRef"
        class="ba-data-table w100"
        header-cell-class-name="table-header-cell"
        :data="tableStore.table.data"
        :row-key="tableStore.pk"
        :border="true"
        v-loading="tableStore.table.loading"
        stripe
        @selection-change="onSelectionChange"
        v-bind="$attrs"
    >
        <!-- Column 组件内部是 el-table-column -->
        <Column
            :attr="item"
            :key="key + '-column'"
            v-for="(item, key) in tableStore.table.column"
        >
            <!-- tableStore 预设的列 render 方案 -->
            <template v-if="item.render" #default="scope">
                <FieldRender
                    :field="item"
                    :row="scope.row"
                    :column="scope.column"
                    :index="scope.$index"
                    :key="
                        key +
                        '-' +
                        scope.$index +
                        '-' +
                        item.render +
                        '-' +
                        (item.prop ? '-' + item.prop + '-' + scope.row[item.prop] : '')
                    "
                />
            </template>
        </Column>
    </el-table>
    <div v-if="props.pagination" class="table-pagination">
        <el-pagination
            :currentPage="tableStore.table.params!.pageNum"
            :page-size="tableStore.table.params!.pageSize"
            :page-sizes="pageSizes"
            background
            :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
            :total="tableStore.table.total"
            @size-change="onTableSizeChange"
            @current-change="onTableCurrentChange"
        ></el-pagination>
    </div>
    <slot name="footer"></slot>
</template>

<script setup lang="ts">
import { ref, nextTick, inject, computed } from 'vue'
import type { ElTable, TableInstance } from 'element-plus'
import FieldRender from '@/components/table/fieldRender/index.vue'
import Column from '@/components/table/column/index.vue'
import { useConfig } from '@/stores/config'
import type TableStoreClass from '@/utils/tableStore'

const config = useConfig()
const tableRef = ref<TableInstance>()
const tableStore = inject('tableStore') as TableStoreClass

interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
    pagination?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    pagination: true
})

const onTableSizeChange = (val: number) => {
    tableStore.onTableAction('page-size-change', { size: val })
}

const onTableCurrentChange = (val: number) => {
    tableStore.onTableAction('current-page-change', { page: val })
}

const pageSizes = computed(() => {
    let defaultSizes = [10, 20, 50, 100]
    if (tableStore.table.params!.pageSize) {
        if (!defaultSizes.includes(tableStore.table.params!.pageSize)) {
            defaultSizes.push(tableStore.table.params!.pageSize)
        }
    }
    return defaultSizes
})


/*
 * 记录选择的项
 */
const onSelectionChange = (selection: TableRow[]) => {
    tableStore.onTableAction('selection-change', selection)
}

const getRef = () => {
    return tableRef.value
}

defineExpose({
    getRef
})
</script>

<style scoped lang="scss">
.ba-data-table :deep(.el-button + .el-button) {
    margin-left: 6px;
}
.ba-data-table :deep(.table-header-cell) .cell {
    color: var(--el-text-color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-pagination {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    padding: 13px 15px;
}
</style>