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 函数中,我们可以处理翻页的逻辑,并重新请求数据以更新表格。

Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐