table.vue

<template>
    <div>
        <my-card v-if="$scopedSlots.search">
            <a-form-model :model="queryForm" layout="horizontal">
                <a-row :gutter="16">
                    <slot name="search" :query="queryForm" />
                </a-row>
            </a-form-model>

            <div class="tw-text-right tw-mt-2">
                <a-space>
                    <a-button @click="reset">重置</a-button>
                    <a-button type="primary" @click="getData">查询</a-button>
                </a-space>
            </div>
        </my-card>

        <my-card class="tw-mt-3">
            <a-space class="tw-mb-2.5">
                <slot name="action" />
            </a-space>
            <a-table
                :data-source="data"
                :loading="loading"
                v-bind="$attrs"
                :pagination="pagination"
                @change="pageChange"
            >
                <slot />
            </a-table>
        </my-card>
    </div>
</template>

<script>
import { request, METHOD } from '@/utils/requestUtil';

const initQuery = {
    pageSize: 10,
    pageNum: 1,
};

export default {
    props: {
        url: String,
    },

    data() {
        return {
            initQuery: {
                ...initQuery,
            },
            data: [],
            queryForm: {},
            loading: false,
            total: 0,
        };
    },

    mounted() {
        this.getData();
    },

    computed: {
        pagination() {
            return {
                current: this.initQuery.pageNum,
                pageSize: this.initQuery.pageSize,
                total: this.total,
                showQuickJumper: true,
            };
        },
    },

    methods: {
        async getData() {
            this.loading = true;
            try {
                await this.getDataWithPage();
            } catch (error) {
                // todo
            }
            this.loading = false;
        },

        async getDataWithPage() {
            const res = await request(this.url, METHOD.GET, { ...this.initQuery, ...this.queryForm });
            this.total = res.total;
            if (this.formatData) this.data = this.formatData(res);
            else this.data = res.records;
        },

        pageChange(page) {
            this.initQuery.pageNum = page.current;
            this.getData();
        },
    },
};
</script>