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

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

ElementUI 提供了 el-pagination 組件，只要配置相應得參數和事件，即可實現分頁。

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 // 總記錄數 }, pageSizes: [10, 20, 30] } }, methods: { handlePageChange(currentPage) { this.tablePage.pageNum = currentPage // 在此刷新數據 }, handleSizeChange(pageSize) { this.tablePage.pageSize = pageSize // 在此刷新數據 } }

2、后端分頁的實現

實現思路：向后臺發送請求，傳入pageNum、pageSize兩參數，直接得到相應的分頁數據。

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

3、前端分頁的實現

實現思路：向后臺發送請求，獲取全部數據，前端通過pageNum、pageSize對數據進行處理，最終得到相應的分頁數據。以下是處理數據得兩種方法：

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

/** * 分頁數據處理 * @param data [Array] 需要分頁的數據 * @param num [Number] 當前第幾頁 * @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 } /** * 分頁數據處理 * @param data [Array] 需要分頁的數據 * @param num [Number] 當前第幾頁 * @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}

總結：無論是前端分頁和還是后端分頁，最終都需要拿到兩個參數：pageNum（當前頁）、pageSize（每頁多少條）。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。