table组件—分页控件的自定义

目录

一、概述

二、实例

---

一、概述

table组件单独使用时，只包含简单的分页功能，即上一页、页码和下一页。仅仅如此显然不能满足需求，所以需要我们根据pagination组件丰富表格的分页功能。

二、实例

自定义分页组件外观

源码

<template>
  <a-table
    :columns="cols"
    :data-source="tbData"
    :row-key="record => record.id"
    :pagination="pagination"
    @change="handleTableChange"
  ></table>
</template>
<script>
export default { 
  data() {
    pagination: {
      // 数据总数
      total: 0,
      // 当前页数
      current: 1,
      // 每页条数
      pageSize: 5,
      // 展示总数
      showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
      // 是否可以改变pageSize
      showSizeChanger: true,
      // 设置每页可以展示多少条的选项
      pageSizeOptions: ['5', '10', '15', '30'],
      // 改变pageSize后触发
      onShowSizeChange: (current, pageSize) => this.pagination.pageSize = pageSize,
      // 小尺寸分页
      size: 'small',
      // 是否可以快速跳转至某页
      showQuickJumper: true
    }
  },
  methods: {
    /**
     * 查询表格
     */
    search() {
      this.getXXX({
        page: this.pagination.current,
        size: this.pagination.pageSize,
      }).then((res) => {
        if (res.code === "200") {
          // 调整分页控件
          this.pagination = {
            ...this.pagination,
            total: res.data.totalElements
          };
        }
      });
    },
    /**
     * 分页触发
     */
    handleTableChange(pagination, filters, sorter) {
      this.pagination = {
        ...this.pagination,
        current: pagination.current
      };
      this.search();
    }
  }
}
</script>

更多分页组件属性，请参考：https://www.antdv.com/components/pagination-cn/