Vue中ElementUI分頁組件Pagination的使用方法
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)。
相關(guān)文章:
1. 使用 kind 和 Docker 啟動(dòng)本地的 Kubernetes環(huán)境2. jsp中sitemesh修改tagRule技術(shù)分享3. Docker究竟是什么 為什么這么流行 它的優(yōu)點(diǎn)和缺陷有哪些?4. docker容器調(diào)用yum報(bào)錯(cuò)的解決辦法5. IntelliJ IDEA導(dǎo)出項(xiàng)目的方法6. Django中如何使用Channels功能7. idea設(shè)置代碼格式化的方法步驟8. intellij idea寫Python教程9. python的json包位置及用法總結(jié)10. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關(guān)系的問題

網(wǎng)公網(wǎng)安備