页面展示:
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); }) },复制代码