在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
本文实例为大家分享了vue实现分页功能的具体代码,供大家参考,具体内容如下
一、组件分页<el-pagination layout="prev, pager, next" @current-change="changePageNum" :current-page="pageNum" :page-size="pageSize" :total="total"> </el-pagination> data(){ return{ tableData: [], total: 0,//总数 pageNum: 1,//当前页 pageSize: 15,//每页显示数量 } } mounted: function () { this.query();//加载页面时,获取数据 }, methods:{ //切换页码 changePageNum: function (val) { this.pageNum = val; this.query(); }, //通过接口,获取数据 query: function () { var data = { name: this.name || '', fleetId: this.FleetId, pageNum: this.pageNum,//当前页 pageSize: this.pageSize//查询个数 }; RoleManage.getRole(data) .then(res => { var data = res; if (res.success) { this.tableData = data.obj.list; this.total = data.obj.total; this.name =''; } else { this.$message('查询失败'); } }).catch(err => { // 异常情况 console.log(err); }); }, } 组件分页效果 二、自己构建分页有些时候需要根据需求自己写分页 1、分页样式 2、上下切页 //调度-系统通讯录分页 dispatchCourentPage: 1, //调度-系统通讯录当前选中标签标记 dispatchCourentIndex: 1, //调度-系统通讯录更多标记项:组id dispatchMorecommandGroupId: '', dispatchTotlePage: 0, //上页 handleLastPage() { if (this.dispatchCourentPage === 1) return; this.dispatchCourentPage -= 1; let index = this.dispatchCourentIndex; if (this.dispatchMorecommandGroupId != '') { this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId); } else { this.queryBookmember(index); } }, //下页 handleNextPage() { if (this.dispatchCourentPage === this.dispatchTotlePage) return; this.dispatchCourentPage += 1; let index = this.dispatchCourentIndex; if (this.dispatchMorecommandGroupId != '') { this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId); } else { this.queryBookmember(index); } } 三、使用监听属性控制分页显示computed: { limitData() { let data = [...this.table1Datas]; return data; }, // 因为要动态计算总页数,所以还需要一个计算属性来返回最终给 Table 的 data dataWithPage() { const data = this.limitData; const start = this.current * this.size - this.size; const end = start + this.size; return [...data].slice(start, end); }, } 四、js控制分页,计算总页数方法1 /** *根据数据条数与每页多少条数据计算页数 * totalnum 数据条数 * limit 每页多少条 */ pageCount(totalnum, limit) { return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (parseInt(totalnum / limit) + 1) : (totalnum / limit))) : 0; }, 方法2 /** * 分页的总页数算法 * 总记录数:totalRecord * 每页最大记录数:maxResult */ function pageCount() { totalPage = (totalRecord + maxResult -1) / maxResult; } 方法3 推荐 totalPage = Math.floor((totalRecord +maxResult -1) /maxResult ); 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
请发表评论