ant-design-vue?Table?pagination分頁怎么實現(xiàn)

這篇文章主要講解了“ant-design-vue Table pagination分頁怎么實現(xiàn)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“ant-design-vue Table pagination分頁怎么實現(xiàn)”吧！

ant-design-vue Table pagination分頁實現(xiàn)

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

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

我們的實現(xiàn)

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

看代碼：

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

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

data () {
    return {
      // 分頁參數(shù)
      pagination: {
        // size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'], // 可選的頁面顯示條數(shù)
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '條'
        }, // 展示每頁第幾條至第幾條和總數(shù)
        hideOnSinglePage: false, // 只有一頁時是否隱藏分頁器
        showQuickJumper: true, // 是否可以快速跳轉(zhuǎn)至某頁
        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：頁碼改變的回調(diào)，參數(shù)是改變后的頁碼及每頁條數(shù)

• onShowSizeChange ：只有pageSize 變化才會回調(diào)

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

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

       <a-table
         ref="table"
          
          row-key="key"
          :columns="goodsColumns"
          :data-source="loadGoodsData"
          :pagination="paginationOpt"
          bordered>
        </a-table>

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

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

調(diào)用接口時，?一定要更新total值?。。。?！?并在發(fā)送請求前結(jié)構(gòu)當(dāng)前頁和pagesize的值，否則一直時默認(rèn)值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(() => {});
    },

感謝各位的閱讀，以上就是“ant-design-vue Table pagination分頁怎么實現(xiàn)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對ant-design-vue Table pagination分頁怎么實現(xiàn)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！