腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

ant-design-vue Table pagination分頁(yè)實(shí)現(xiàn)全過(guò)程

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

這篇文章主要介紹了ant-design-vue Table pagination分頁(yè)實(shí)現(xiàn)全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

ant-design-vue Table pagination分頁(yè)實(shí)現(xiàn)

ant-design-vue Table自帶分頁(yè)的問(wèn)題

表格單獨(dú)使用時(shí)，自帶簡(jiǎn)單分頁(yè)，只包含上一頁(yè), 頁(yè)面碼, 下一頁(yè),例如：

我們的實(shí)現(xiàn)

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

看代碼：

分頁(yè)變動(dòng)出發(fā)handleTableChange事件：

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

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

Ant Design Vue 如何分頁(yè)（后臺(tái)傳入）

我們?cè)谑褂梅猪?yè)使，直接用表格()的自定義: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對(duì)象，代碼片段如下：

// 分頁(yè)
? ? ? paginationOpt: {
? ? ? ? defaultCurrent: 1, // 默認(rèn)當(dāng)前頁(yè)數(shù)
? ? ? ? defaultPageSize: 5, // 默認(rèn)當(dāng)前頁(yè)顯示數(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(); //顯示列表的接口名稱(chēng)
? ? ? ? },
? ? ? ? // 改變每頁(yè)數(shù)量時(shí)更新顯示
? ? ? ? onChange: (current, size) => {
? ? ? ? ? this.paginationOpt.defaultCurrent = current;
? ? ? ? ? this.paginationOpt.defaultPageSize = size;
? ? ? ? ? this.searchCameraFrom();
? ? ? ? },
? ? ? },

調(diào)用接口時(shí)，?一定要更新total值！?。。?！?并在發(fā)送請(qǐng)求前結(jié)構(gòu)當(dāng)前頁(yè)和pagesize的值，否則一直時(shí)默認(rèn)值1和5（我這邊初始時(shí)1和5，可自己更改）

? ? // 查詢(xún)
? ? 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(() => {});
? ? },