Vue中ElementUI分頁(yè)組件Pagination的使用方法

更新時(shí)間：2021年05月31日 10:08:44 作者：G.E.M.千百度

這篇文章主要為大家詳細(xì)介紹了Vue中ElementUI分頁(yè)組件Pagination的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue中ElementUI分頁(yè)組件Pagination的使用，供大家參考，具體內(nèi)容如下

一、概要

ElementUI 提供了 el-pagination 組件，只要配置相應(yīng)得參數(shù)和事件，即可實(shí)現(xiàn)分頁(yè)。

二、實(shí)現(xiàn)

1、基本用法

<div class="pagination">
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="tablePage.pageNum"
      :page-size="tablePage.pageSize"
      :page-sizes="pageSizes"
      :total="tablePage.total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
    />
</div>

data() {
    return {
      tablePage: {
        pageNum: 1, // 第幾頁(yè)
        pageSize: 10, // 每頁(yè)多少條
        total: 0 // 總記錄數(shù)
      },
      pageSizes: [10, 20, 30]
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      // 在此刷新數(shù)據(jù)
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      // 在此刷新數(shù)據(jù)
    }
  }

2、后端分頁(yè)的實(shí)現(xiàn)

實(shí)現(xiàn)思路：向后臺(tái)發(fā)送請(qǐng)求，傳入pageNum、pageSize兩參數(shù)，直接得到相應(yīng)的分頁(yè)數(shù)據(jù)。

// 獲取數(shù)據(jù)
getData() {
      let param = {
        pageNum: this.tablePage.pageNum,
        pageSize: this.tablePage.pageSize
      }
      // 請(qǐng)求后臺(tái)接口函數(shù)
      getDataApi(param, { loading: true }).then(res => {
        // 后臺(tái)返回?cái)?shù)據(jù)
        this.list = res.data.list
        this.tablePage.total = res.data.total
      })
    },

3、前端分頁(yè)的實(shí)現(xiàn)

實(shí)現(xiàn)思路：向后臺(tái)發(fā)送請(qǐng)求，獲取全部數(shù)據(jù)，前端通過(guò)pageNum、pageSize對(duì)數(shù)據(jù)進(jìn)行處理，最終得到相應(yīng)的分頁(yè)數(shù)據(jù)。以下是處理數(shù)據(jù)得兩種方法：

1、利用 Array.slice 截取想要的數(shù)組片段（此方法要考慮總頁(yè)數(shù)為“1” 和尾頁(yè) 的情況）
2、利用 Array.filter 過(guò)濾出想要的數(shù)組片段（此方法無(wú)需考慮總頁(yè)數(shù)為“1” 和尾頁(yè) 的情況，只要滿足條件即可

/**
     * 分頁(yè)數(shù)據(jù)處理
     * @param data [Array] 需要分頁(yè)的數(shù)據(jù)
     * @param num [Number] 當(dāng)前第幾頁(yè)
     * @param size [Number] 每頁(yè)顯示多少條
*/
    getList(data, num, size) {
      let list, total, start, end, isFirst, isLast
      total = data.length
      isFirst = total < size
      isLast = Math.ceil(total / size) === num
      start = (num - 1) * size
      end = isFirst || isLast ? start + (total % size) : start + size
      list = data.slice(start, end)
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
    }
    /**
     * 分頁(yè)數(shù)據(jù)處理
     * @param data [Array] 需要分頁(yè)的數(shù)據(jù)
     * @param num [Number] 當(dāng)前第幾頁(yè)
     * @param size [Number] 每頁(yè)顯示多少條
     */
    getList(data, num, size) {
      let list, start, end
      start = (num - 1) * size
      end = start + size
      list = data.filter((item, index) => {
        return index >= start && index < end
      })
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
}

總結(jié)：無(wú)論是前端分頁(yè)和還是后端分頁(yè)，最終都需要拿到兩個(gè)參數(shù)：pageNum（當(dāng)前頁(yè)）、pageSize（每頁(yè)多少條）。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: