2019獨角獸企業重金招聘Python工程師標準>>>

頁面展示：

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,//默認在第一頁

pageNum:1,//默認每頁顯示1條數據

totalCount:1，//默認總條數為一條

1、操作每頁顯示幾條

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

2、操作當前頁

handleCurrentChange(val) {this.cur_page = val;this.getPackData();//獲取用戶點擊的當前頁后刷新頁面數據},

3、總條數獲取：

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

轉載于:https://my.oschina.net/u/3763385/blog/1928543

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。