vue实现分页功能
时间:2023-03-03 11:18:02|栏目:vue|点击: 次
本文实例为大家分享了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 );
上一篇:springboot vue接口测试前端动态增删表单功能实现
栏 目:vue
本文标题:vue实现分页功能
本文地址:http://www.codeinn.net/misctech/226786.html