vue+element-ui的分页完整版

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的分页完整版的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。