vue实现分页功能
更新时间:2021年08月31日 14:50:34 作者:waillyer
这篇文章主要为大家详细介绍了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 );
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue使用echarts时created里拿到的数据无法渲染的解决
这篇文章主要介绍了vue使用echarts时created里拿到的数据无法渲染的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03Vue中使用highlight.js实现代码高亮显示以及点击复制
本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-01-01
最新评论