ant desgin vue 中的表格分页实现（详解）

a-table 组件自带了分页功能，你可以通过配置 pagination 属性来启用分页，同时还可以对分页器进行一些自定义调整，话不多说，直接上代码：

<template>
  <a-table :columns="columns" :data-source="dataSource" :pagination="pagination">
    <!-- 表格列定义 -->
  </a-table>
</template>
 <script>
export default {
  data() {
    return {
      columns: [
        // 列定义
      ],
      dataSource: [
        // 表格数据
      ],
      pagination: {
        // 分页配置
        pageSize: 10, // 每页显示的条数
        showSizeChanger: true, // 是否可以改变每页显示的条数
        pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页显示条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 50, // 总条数
        onChange: this.handlePageChange // 页码改变时的回调函数
      }
    }
  },
  methods: {
    handlePageChange(page, pageSize) {
      // 页码改变时的处理函数
    }
  }
}
</script>

在上面的代码中，我们给 a-table 组件传递了 pagination 对象作为配置信息。其中包括需要显示的每页条数、分页条数是否可调、当前页码、总条数等信息。在配置中，我们还可以通过 onChange 属性指定一个函数来处理页码改变的事件。 在 handlePageChange 函数中，我们可以处理翻页的逻辑，并重新请求数据以更新表格。