Vue中ElementUI分頁組件Pagination的使用方法

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

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

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

一、概要

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

二、實(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, // 第幾頁
        pageSize: 10, // 每頁多少條
        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、后端分頁的實(shí)現(xiàn)

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

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

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

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

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

/**
     * 分頁數(shù)據(jù)處理
     * @param data [Array] 需要分頁的數(shù)據(jù)
     * @param num [Number] 當(dāng)前第幾頁
     * @param size [Number] 每頁顯示多少條
*/
    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
    }
    /**
     * 分頁數(shù)據(jù)處理
     * @param data [Array] 需要分頁的數(shù)據(jù)
     * @param num [Number] 當(dāng)前第幾頁
     * @param size [Number] 每頁顯示多少條
     */
    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é)：無論是前端分頁和還是后端分頁，最終都需要拿到兩個參數(shù)：pageNum（當(dāng)前頁）、pageSize（每頁多少條）。

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

您可能感興趣的文章: