一篇文章告诉你如何实现Vue前端分页和后端分页
更新时间:2022年1月1日 14:10 点击:744 作者:lxslxskxs
1:前端手写分页(数据量小的情况下)
前端需要使用slice截取: tableData((page-1)pageSize,pagepageSize)
2:后端分页,前端只需要关注传递的page和pageSize
3:前端手写分页按钮
<body> <div id="app"> <table class="table table-bordered table-condensed"> <tr class="bg-primary"> <th class="text-center">排序</th> <th class="text-center">用户姓名</th> <th class="text-center">用户性别</th> <th class="text-center">所在城市</th> </tr> <tr class="text-center active" v-for="(v,i) in list" :key="i"> <td>{{num(i)}}</td> <!-- <td>{{params.pagesize}}</td> --> <td>{{v.name}}</td> <td>{{v.sex}}</td> <td>{{v.addr}}</td> </tr> </table> <nav aria-label="Page navigation" style="text-align: center;"> <ul class="pagination"> <!-- 上一页 --> <li @click="prePage()" :class="{'disabled':params.page == 1}"> <a aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="curPage(page)"> <a style="cursor: pointer;"> {{page}} </a> </li> <!-- 下一页 --> <li :class="{'disabled':params.page == totalPage}" @click="next()"> <a aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </body>
window.onload = function () { // 1s内只允许发送请求(出发事件)一次(可多次点击) 节流 throttle new Vue({ el: '#app', data: { params:{ page:1, pagesize:20, name:'' }, list: [], total:0,//总的条数 totalPage:0,//总的页数 flag: false, }, created() { this.getData() }, computed: { pages() { let totalPage = this.totalPage; let page = this.params.page; // 总的页数小于10页 if(totalPage < 10) return totalPage; // 总的页数大于10页添加省略号 if(page <= 5) { // 前五页 // (1) 页码小于5 左边显示六个 return [1,2,3,4,5,6,'...',totalPage] } else if (page >= totalPage - 5) { // 后五页 console.log("触发") // (2) 页码大于总页数-5 右边显示六个 return [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage] } else { // 中间五页 // (3)页码在 5-(totalPage-5)之间 左边区间不能小于5 右边区间不能大于总页数totalPage,注意 左边的当前页-num 不能小于1, 右边的当前页+num不能大于总页数 return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage] } }, num() { let { pagesize, page} = this.params // (1-1) * 10 + 10 + 0 + 1 = 1; // (2-1) * 10 + 10 + 0 + 1 = 11 // 第一页 = (当前页 -1 )* 每页的条数 + 索引值 + 1 保证是从1开始的 return i => (page - 1) * pagesize + i + 1 // (当前页- 1 * 每页的条数) + 索引值 + 1 } }, methods: { getData() { if(this.flag) return; this.flag = true; // 下面就是相当于一个定时器 axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => { console.log('res',res.data.users) let { total,users } = res.data.users; this.total = total; this.totalPage = Math.ceil( this.total / this.params.pagesize); this.list = users this.flag = false; }) }, curPage(page) { if(page == '...') return if(this.flag) return; this.params.page = page; this.getData() }, prePage() { // if(this.params.page == '...') return if(this.params.page > 1) { if(this.flag) return; --this.params.page; console.log('page',this.params.page) this.getData() } }, next() { // if(this.params.page == '...') return if(this.flag) return; console.log("执行",this.totalPage) if(this.params.page < this.totalPage) { ++this.params.page; console.log('page',this.params.page) this.getData() } }, } }) }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/lxs19930928/article/details/122246574
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23