Ant Design Vue3 Table pagination使用

<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    :pagination="pagination"
    @change="handleTableChange"
  >
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      // 表格列定义
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        // 更多列定义...
      ],
      // 表格数据
      data: [], // 从服务器获取数据填充
      // 分页对象
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0, // 从服务器获取总数据量
        showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        onShowSizeChange: (current, size) => this.changePageSize(size),
        onChange: (page, pageSize) => this.changePage(page, pageSize),
      },
    };
  },
  methods: {
    // 表格分页变化时的回调
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      // 根据分页信息从服务器获取数据
      this.fetchData(pagination.current, pagination.pageSize);
    },
    // 改变分页大小
    changePageSize(size) {
      this.pagination.pageSize = size;
      this.fetchData(this.pagination.current, this.pagination.pageSize);
    },
    // 改变页码
    changePage(page, pageSize) {
      this.pagination.current = page;
      this.fetchData(page, pageSize);
    },
    // 从服务器获取数据的方法
    fetchData(page, pageSize) {
      // 这里应该调用API获取数据，然后更新data和pagination.total
      // 模拟数据获取
      this.data = []; // 获取到的数据
      this.pagination.total = 100; // 服务器返回的数据总数
    },
  },
  mounted() {
    this.fetchData(this.pagination.current, this.pagination.pageSize);
  },
};
</script>

<template>
    <a-table
        :scroll="{ y: 350 }"
        :style="{fontSize: '15px'}"
        :columns="columns"
        :row-key="record => record.id"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
    > 
    </a-table>
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import axios from 'axios';

import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

export default defineComponent({
  setup: function () {
    // 表格列定义
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },

    const data = ref();
    const pagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
      showTotal: (total: number) => `共 ${total} 条记录`,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: (current: any, size: any) => changePageSize(size),
      onChange: (page: any) => changePage(page),
    });
    // 改变分页大小
    const changePageSize = (size: any) =>{
      pagination.value.pageSize = size;
      handleQuery({
        page: pagination.value.current,
        size: pagination.value.pageSize,
      });
    }
    // 改变页码
    const changePage = (page: any) =>{
      pagination.value.current = page;
      handleQuery({
        page: pagination.value.current,
        size: pagination.value.pageSize,
      });
    }
    const handleTableChange = (pagination: any) => {
      handleQuery({
        page: pagination.current,
        size: pagination.pageSize,
      });
    };

    const loading = ref(false);

    const handleQuery = (params: any) => {
      // 这里应该调用API获取数据，然后更新data和pagination.total
      // 模拟数据获取
      data.value = []; // 获取到的数据
      // 重置分页按钮
      pagination.value.current = params.page;
      pagination.value.total = data.total;
    };

    onMounted(() => {
      handleQuery({
        page: 1,
        size: pagination.value.pageSize,
      });
    });

    return {
      data,
      pagination,
      columns,
      loading,

      handleTableChange,
      handleQuery,
    };
  },
});
</script>