一篇文章告诉你如何实现Vue前端分页和后端分页一篇文章告诉你如何实现Vue前

1：前端手写分页(数据量小的情况下)
2：后端分页，前端只需要关注传递的page和pageSize
总结

1：前端手写分页(数据量小的情况下) 前端需要使用slice截取： tableData((page-1)pageSize,pagepageSize)

文章图片

文章图片

2：后端分页，前端只需要关注传递的page和pageSize 3：前端手写分页按钮

排序用户姓名用户性别所在城市
{{num(i)}} {{v.name}} {{v.sex}} {{v.addr}}
«
{{page}}
»

排序	用户姓名	用户性别	所在城市
{{num(i)}}	{{v.name}}	{{v.sex}}	{{v.addr}}

window.onload = function () {// 1s内只允许发送请求(出发事件)一次(可多次点击) 节流 throttlenew 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 = usersthis.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()}},} })}