【Ant-Design Vue3】Table与pagination 分页器

效果：

代码：

 <a-table
    :columns="columns"
    :data-source="dataSource"
    :rowKey="(record) => record.id"
    :pagination="pagination"
    :loading="loading"
    :scroll="{ x: '100%', y: 530 }"
    @change="handleTableChange"
  ></a-table>

import {
    
     message } from "ant-design-vue";
import {
    
     computed, defineComponent, ref } from "vue";
export default defineComponent({
    
    
    name: "table",
    setup() {
    
    
        // 获取列表数据
        getDataList = async () => {
    
    
            loading.value = true
            const param = {
    
    
            };
            let res = await getPressureStationDataList(param);
            const {
    
     status, data, msg } = res;
            if (status !== 200) {
    
    
                message.error(msg);
                return;
            } else {
    
    
                dataSource.value = data.result;
                total.value = data.totalRows;
                current.value = data.pageIndex;
                pageSize.value = data.pageSize;
            }
            loading.value = false
        };
        //调用列表
        getDataList();
            // 列表分页
        const pagination = computed(() => ({
    
    
            total: total.value,
            current: current.value,
            pageSize: pageSize.value,
            showTotal:  total =>`总共 ${
      
      total} 项`,
            defaultPageSize: 10,
            // pageSizeOptions: ['5', '10', '15', '20'], // 可不设置使用默认
            showSizeChanger:true, // 是否显示pagesize选择
            showQuickJumper: true, // 是否显示跳转窗
        }));
        // 列表当前页更改
        const handleTableChange = (pag, filters, sorter) => {
    
    
            current.value = pag.current;
            pageSize.value = pag.pageSize;
            getDataList();
        };

        return {
    
    
            dataSource,
            pagination,
            loading,
        }
    }
}