Ant Design Vue——table組件分頁功能的封裝（基於Vue2/后端分頁）

摘要

我們在使用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()
    }
  }
}