深圳网站优化运营,重庆做网站优化,小程序开发兼职的注意要点,微信小程序怎么推广当我们向后台请求大量数据的时候#xff0c;并要在页面展示出来#xff0c;请求的数据可能上百条数据或者更多的时候#xff0c;并不想在一个页面展示#xff0c;这就需要使用分页功能来去完成了。
1.本次所使用的是vue2.0element-ui实现一个分页功能#xff0c;element-…当我们向后台请求大量数据的时候并要在页面展示出来请求的数据可能上百条数据或者更多的时候并不想在一个页面展示这就需要使用分页功能来去完成了。
1.本次所使用的是vue2.0element-ui实现一个分页功能element-ui这个组件特别丰富分页中给我提供了一个Pagination 分页使用Pagination 快速完成分页功能 最终效果展示 div classdeitdiv classcrumbsel-breadcrumb separator/el-breadcrumb-itemi classel-icon-date/i 数据管理/el-breadcrumb-itemel-breadcrumb-item用户列表/el-breadcrumb-item/el-breadcrumbdiv classcantainerel-table stylewidth: 100%;:datauserList.slice((currentPage-1)*pagesize,currentPage*pagesize) //对数据请求的处理最为重要的一句话el-table-column typeindex width50 /el-table-columnel-table-column label日期 propdate width180 /el-table-columnel-table-column label用户姓名 propname width180 /el-table-columnel-table-column label邮箱 propemail width180 /el-table-columnel-table-column label地址 propaddress width200 /el-table-column /el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 20, 40] //这是下拉框可以选择的每选择一行要展示多少内容:page-sizepagesize //显示当前行的条数layouttotal, sizes, prev, pager, next, jumper:totaluserList.length //这是显示总共有多少数据/el-pagination/div/div/div 需要data定义一些userList定义一个空数组请求的数据都是存放这里面 data () {return {currentPage:1, //初始页pagesize:10, // 每页的数据userList: []}}, 对一些数据方法处理数据的来源是自己通过json-server搭建的本地数据通过vue-resource请求数据 created() {this.handleUserList()},methods: {// 初始页currentPage、初始每页数据数pagesize和数据datahandleSizeChange: function (size) {this.pagesize size;console.log(this.pagesize) //每页下拉显示数据},handleCurrentChange: function(currentPage){this.currentPage currentPage;console.log(this.currentPage) //点击第几页},handleUserList() {this.$http.get(http://localhost:3000/userList).then(res { //这是从本地请求的数据接口this.userList res.body})}} 以上都是分页所需的功能也是自己在自己写案例中所遇到的并总结下方便查看喜欢的可以关注一下
