頁面展示:
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); }) },複製程式碼