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

ElementUI 提供了 el-pagination 組件，只要配置相應(yīng)得參數(shù)和事件，即可實(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)思路：向后臺(tái)發(fā)送請(qǐng)求，傳入pageNum、pageSize兩參數(shù)，直接得到相應(yīng)的分頁數(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.listthis.tablePage.total = res.data.total }) },

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

實(shí)現(xiàn)思路：向后臺(tái)發(fā)送請(qǐng)求，獲取全部數(shù)據(jù)，前端通過pageNum、pageSize對(duì)數(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é)：無論是前端分頁和還是后端分頁，最終都需要拿到兩個(gè)參數(shù)：pageNum（當(dāng)前頁）、pageSize（每頁多少條）。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。