2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

頁面展示：

vue組件中分頁代碼：

<div class="pagination"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="cur_page":page-sizes="[1, 2, 3, 4]":page-size="pageNum"layout="total,sizes, prev, pager, next, jumper":total="totalCount"></el-pagination></div>

先聲明變量：

cur_page:1,//默認(rèn)在第一頁

pageNum:1,//默認(rèn)每頁顯示1條數(shù)據(jù)

totalCount:1，//默認(rèn)總條數(shù)為一條

1、操作每頁顯示幾條

//操作每頁顯示幾條handleSizeChange(val) {this.pageNum=val;this.getPackData();//根據(jù)用戶獲取的每頁顯示頁面數(shù)量顯示頁面},

2、操作當(dāng)前頁

handleCurrentChange(val) {this.cur_page = val;this.getPackData();//獲取用戶點(diǎn)擊的當(dāng)前頁后刷新頁面數(shù)據(jù)},

3、總條數(shù)獲取：

totalPageNum(){this.$axios.get("/api/pagePackMade.do").then(res=>{this.totalCount =res.data[0].count;//總信息條數(shù)從數(shù)據(jù)庫獲取;}).catch(error=>{console.log(error);})},

轉(zhuǎn)載于:https://my.oschina.net/u/3763385/blog/1928543

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue+element-ui的分页完整版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。