Ant Design Vue——table组件分页功能的封装

摘要

我们在使用Ant Design Vue的Table表格时，经常需要使用其中的分页功能，通过设置pagination=“true”即可开启表格分页，但是我们还需要配置许多分页参数，因此对分页功能进行封装能很大程度提升开发效率。

封装

首先我们新建一个mixins文件夹，并在里面新建一个pagination.js文件作为封装分页功能的混入文件：

// 因为是后端分页，所以需要设定好后端分页参数，这里根据业务需求，默认为page、limit，分别代表查询页和每页数据数量参数，current、pageSize分别代表对于的值。
export default ({ serverCurrent = 'page', serverPageSize = 'limit', current = 1, pageSize = 10 } = {}) => ({
  data () {
    const change = (current, pageSize) => {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
    }
    return {
      pagination: {
        total: 0,
        current: current,
        pageSize: pageSize,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        onShowSizeChange: (current, pageSize) => change(current, pageSize),
        onChange: (current, pageSize) => change(current, pageSize),
        // 分页参数重置方法，仅仅重置分页参数，不会重新加载表格
        reset: () => {
          this.pagination.current = current
          this.pagination.pageSize = pageSize
        }
      }
    }
  },
  computed: {
    // 服务端查询参数
    serverPagination () {
      return {
        [serverCurrent]: this.pagination.current, // 第几页
        [serverPageSize]: this.pagination.pageSize // 每页中显示数据的条数
      }
    }
  }
})

使用

<template>
  //1. 在视图中直接引入pagination变量
  <a-table
    :pagination="pagination"
    @change="handleTableChange"
  >
  </a-table>
</template>
// 2. 引入混入器
import paginationMix from '@mix/pagination.js';
export default {
  // 3. 混入分页器，传入分页接口需要的参数，默认为page、limit
  mixins: [ paginationMix({ serverCurrent: 'page', serverPageSize: 'limit' }) ],
  created () {
    this.getTableData()
  },
  methods: {
    async getTableData () {
      const { data: res } = await this.$http.get(
        this.url, { params: this.serverPagination }
      )
      this.data = res.data.list
       // 4. 网络获取数据时，将`total`值设置在`pagination`对象上即可
      this.pagination.total = res.data.total
    },
    handleTableChange () {
      this.getTableData()
    }
  }
}