xj-screen/src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue

<template>
    <a-table
        class="ant-table-striped"
        :loading="tableLoading"
        :dataSource="dataSource"
        :columns="columns"
        :scroll="{ y: '56vh' }"
        :pagination="paginationProp"
        :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
    >
        <template #bodyCell="{ column, record, index, text }">
            <template v-if="column.customRender && isFunction(column.customRender)" v-html="column.customRender({ column, record, index, text })">
            </template>
            <slot v-else-if="column.slot" :name="column.slot" v-bind="{ column, record, index, text } || {}"></slot>
            <template v-else>
                {{ text }}
            </template>

            <slot name="bodyCell" v-bind="{ column, record, index, text } || {}"></slot>
        </template>
    </a-table>
</template>
<script setup lang="ts">
    import { nextTick, ref, watch } from 'vue';
    import { isFunction } from '/@/utils/is.ts';

    const props = defineProps({
        columns: {
            default: () => [],
        },
        api: {
            type: Function,
        },
        apiParams: {
            default: () => {},
        },
        afterFetch: {
            type: Function,
        },
    });
    //分页相关
    const current = ref(1);
    const pageSize = ref(10);
    const tableLoading = ref(false);
    const total = ref(0);
    const deptId = ref();
    const paginationProp = ref({
        showSizeChanger: true,
        pageSizeOptions: ['10', '30', '50'],
        pageSize,
        current,
        total,
        showTotal: (total) => `总 ${total} 条`,
        onChange: pageChange,
    });

    function pageChange(page, pageS) {
        current.value = page;
        pageSize.value = pageS;
        getRecords();
    }

    function setPage({ cur, size, sum }) {
        current.value = cur;
        pageSize.value = size;
        total.value = sum;
    }

    function setDataSource(result) {
        dataSource.value = result;
    }

    const dataSource = ref([]);

    async function getRecords() {
        try {
            tableLoading.value = true;
            const { code, result } = await props.api({ ...props.apiParams, pageSize: pageSize.value, pageNo: current.value });
            if (code == 200) {
                if (props.afterFetch && isFunction(props.afterFetch)) {
                    dataSource.value = props.afterFetch({ result, setPage: setPage, setDataSource: setDataSource });
                } else {
                    dataSource.value = result?.records;
                }
                paginationProp.value = { ...paginationProp.value, ...result };
                paginationProp.value.pageSize = result.size;
            }
        } catch (e) {
            dataSource.value = [];
            tableLoading.value = false;
        } finally {
            tableLoading.value = false;
        }
    }

    watch(
        props,
        (v, o) => {
            if (JSON.stringify(v) !== JSON.stringify(o)) {
                nextTick(() => {
                    pageSize.value = 10;
                    current.value = 1;
                    getRecords();
                });
            }
        },
        {
            immediate: true,
        }
    );
    defineExpose({
        getRecords,
    });
</script>
<style scoped lang="less">
    :deep(.ant-table-thead > tr > th) {
        color: var(--tableFontColor) !important;
        background: var(--tableHeadBg) !important;
        border-top: 1px solid var(--tableHeadBg) !important;
        border-bottom: none;
        padding: 9px 9px;
        text-align: center;
    }

    :deep(.ant-table-cell-scrollbar) {
        box-shadow: none !important;
    }

    :deep(.ant-table) {
        color: var(--tableFontColor);
        background-color: transparent;
        //pointer-events: none;
    }

    :deep(.ant-table-tbody > tr > td) {
        border-bottom: none;
        padding: 0 4px;
    }

    :deep(.ant-table-row:hover) {
        background-color: transparent;
        color: var(--tableFontColor);
    }

    .ant-table-striped :deep(.table-default) td,
    .ant-table-striped :deep(.table-striped) td {
        background-color: var(--tableRowBg) !important;
        border-bottom: 1px solid var(--tableRowBorder);
        padding: 10px 4px !important;
        text-align: center;
    }

    :deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
        background: transparent;
    }

    // 分页
    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
        background-color: var(--pageItemLink);
        color: #8291a9;
        border: none;
    }

    :deep(.ant-pagination-item) {
        background-color: var(--pageItemLink);
        color: var(--tableFontColor);
        border: none;
    }

    // 当前页选中的样式
    :deep(.ant-pagination-item-active) {
        background-color: var(--pageItemActiveBg);
    }

    :deep(.ant-pagination-item-active a) {
        color: #fff;
    }

    :deep(.ant-pagination-item a),
    :deep(.ant-pagination-total-text) {
        color: var(--tableFontColor);
    }

    //:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
    //    color: var(--tableFontColor);
    //    background-color: var(--pageItemLink);
    //}

    // 省略样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
        color: var(--tableFontColor);
    }

    // 省略鼠标移入样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
        color: rgba(255, 255, 255, 0.4);
    }

    // 下一页
    :deep(.ant-pagination-next .ant-pagination-item-link) {
        background-color: var(--pageItemLink);
        color: #8291a9;
        border: none;
    }

    :deep(.ant-table-pagination-right) {
        margin-right: 10px !important;
    }
</style>