ant-design-vue Table pagination分頁實現全過程

更新時間：2023年04月20日 09:56:48 作者：字節(jié)叔叔

這篇文章主要介紹了ant-design-vue Table pagination分頁實現全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

ant-design-vue Table pagination分頁實現

ant-design-vue Table自帶分頁的問題

表格單獨使用時，自帶簡單分頁，只包含上一頁, 頁面碼, 下一頁,例如：

我們的實現

但如果想要與后端配合著寫，則需要傳入pagination參數來自定義，

看代碼：

分頁變動出發(fā)handleTableChange事件：

<a-table
          :columns="columns"
          :data-source="wmsWarehouseList"
          :pagination="pagination"
          @change="handleTableChange"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >

data () {
    return {
      // 分頁參數
      pagination: {
        // size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'], // 可選的頁面顯示條數
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '條'
        }, // 展示每頁第幾條至第幾條和總數
        hideOnSinglePage: false, // 只有一頁時是否隱藏分頁器
        showQuickJumper: true, // 是否可以快速跳轉至某頁
        showSizeChanger: true // 是否可以改變pageSize
      },
  }
}
methods: {
    handleTableChange (e) {
      console.log(e)
      this.pagination = e
      this.loading = true
      const pageNum = e.current - 1
      const pageSize = e.pageSize
      const query = {
        ...this.queryParams,
      }
      const pageReq = { page: pageNum, size: pageSize }
      listWmsWarehouse(query, pageReq).then((response) => {
        
      })
    },

onChange與onShowSizeChange 比較

onChange：頁碼改變的回調，參數是改變后的頁碼及每頁條數
onShowSizeChange ：只有pageSize 變化才會回調

Ant Design Vue 如何分頁（后臺傳入）

我們在使用分頁使，直接用表格()的自定義:pagination屬性最方便；如下圖所示：

? ? ? ?<a-table
? ? ? ? ?ref="table"
? ? ? ? ? style="margin-bottom: 24px"
? ? ? ? ? row-key="key"
? ? ? ? ? :columns="goodsColumns"
? ? ? ? ? :data-source="loadGoodsData"
? ? ? ? ? :pagination="paginationOpt"
? ? ? ? ? bordered>
? ? ? ? </a-table>

基于VUE，我們必須在data中定義paginationOpt對象，代碼片段如下：

// 分頁
? ? ? paginationOpt: {
? ? ? ? defaultCurrent: 1, // 默認當前頁數
? ? ? ? defaultPageSize: 5, // 默認當前頁顯示數據的大小
? ? ? ? total: 0, // 總數，必須先有
? ? ? ? showSizeChanger: true,
? ? ? ? showQuickJumper: true,
? ? ? ? pageSizeOptions: ["5", "10", "15", "20"],
? ? ? ? showTotal: (total) => `共 ${total} 條`, // 顯示總數
? ? ? ? onShowSizeChange: (current, pageSize) => {
? ? ? ? ? this.paginationOpt.defaultCurrent = 1;
? ? ? ? ? this.paginationOpt.defaultPageSize = pageSize;
? ? ? ? ? this.searchCameraFrom(); //顯示列表的接口名稱
? ? ? ? },
? ? ? ? // 改變每頁數量時更新顯示
? ? ? ? onChange: (current, size) => {
? ? ? ? ? this.paginationOpt.defaultCurrent = current;
? ? ? ? ? this.paginationOpt.defaultPageSize = size;
? ? ? ? ? this.searchCameraFrom();
? ? ? ? },
? ? ? },

調用接口時，?一定要更新total值?。。。?！?并在發(fā)送請求前結構當前頁和pagesize的值，否則一直時默認值1和5（我這邊初始時1和5，可自己更改）

? ? // 查詢
? ? searchCameraFrom() {
? ? ? console.log(this.cameraParams);
? ? ? const { defaultCurrent, defaultPageSize } = this.paginationOpt;
?
? ? ? this.$api.Camera.getCameraList({
? ? ? ? currPage: defaultCurrent,
? ? ? ? pageSize: defaultPageSize,
? ? ? ? info: this.cameraParams,
? ? ? })
? ? ? ? .then((res) => {
? ? ? ? ? if (res.code != "200") {
? ? ? ? ? ? return Promise.reject;
? ? ? ? ? }
? ? ? ? ? console.log(res);
? ? ? ? ? this.cameraList = res.data;
? ? ? ? ? this.paginationOpt.total = res.total;
? ? ? ? })
? ? ? ? .catch(() => {});
? ? },