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

<template>
    <vxe-table
        ref='tableRef'
        class='ba-data-table w100'
        header-cell-class-name='table-header-cell'
        :data='tableStore.table.data'
        :border='true'
        v-loading='tableStore.table.loading'
        stripe
        size='small'
        @checkbox-change='onSelectionChange'
        v-bind='$attrs'
        :column-config='{resizable: true}'
        :tree-config='{}'
        :row-config='{isCurrent: true, isHover: true}'
    >
        <!-- Column 组件内部是 el-table-column -->
        <template v-if='isGroup'>
            <vxe-table-colgroup
                v-if='isGroup'
                v-for='(item, index) in tableStore.table.column'
                :field='item.field'
                :title='item.title'
                :key='index'
                :min-width='item.width'
                show-overflow
                align='center'
            >
                <Column
                    :attr='child'
                    :key="key + '-column'"
                    v-for='(child, key) in item.children'
                    :tree-node='child.treeNode'
                >
                    <!-- tableStore 预设的列 render 方案 -->
                    <template v-if='child.render' #default='scope'>
                        <FieldRender
                            :field='child'
                            :row='scope.row'
                            :column='scope.column'
                            :index='scope.rowIndex'
                            :key='child.field+scope.rowIndex'
                        />
                    </template>
                </Column>
            </vxe-table-colgroup>
        </template>
        <template v-else>
            <Column
                :attr='item'
                :key="key + '-column'"
                v-for='(item, key) in tableStore.table.column'
                :tree-node='item.treeNode'
            >
                <!-- tableStore 预设的列 render 方案 -->
                <template v-if='item.render' #default='scope'>
                    <FieldRender
                        :field='item'
                        :row='scope.row'
                        :column='scope.column'
                        :index='scope.rowIndex'
                        :key='item.field+scope.rowIndex'
                    />
                </template>
            </Column>

        </template>

    </vxe-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
    isGroup?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    pagination: true,
    isGroup: false
})

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: any) => {
    // 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>