分页,是在业务中经常要用到,为了节省用户流量和提升用户体验
讲一下思路:
首先是定义页号currentPage 和 页大小pagesize,用一个数组保存总数据;
用一个计算属性page_arrs,作用是 让页面展示的是我们所需要的页面
而我们在page_arrs中要分割原数组,用一个slice()方法进行分割;
在控件button上绑定点击方法,对页号currentPage进行修改,从而修改整个页面展示
具体看以下代码
代码:
data () { return { arrs : [ {name:'Otto',id:1}, {name:'Jacob',id:2}, {name:'Larry',id:3}, {name:'Tim',id:4}, {name:'Tom',id:5}, {name:'Jack',id:6}, {name:'Otto',id:1}, {name:'Jacob',id:2}, {name:'Larry',id:3}, {name:'Tim',id:4}, {name:'Tom',id:5}, {name:'Jack',id:6}, {name:'Otto',id:1}, {name:'Jacob',id:2}, {name:'Larry',id:3}, {name:'Tim',id:4}, {name:'Tom',id:5}, {name:'Jack',id:6} ], currentPage : 1,//当前页号 pagesize :10 //每页大小 } }
<table class="table table-hover "> <thead> <tr> <th class="number">序号</th> <th >题目</th> <th class="del">删除</th> </tr> </thead> <tbody> <tr class="tr" v-for="(item,index) in page_arrs" :key="index"> <th>{{index+1}}</th> <td>{{item.name}}</td> <td><a href="">删除</a></td> </tr> </tbody> </table> <div class="page"> <button class="btn btn-default" type="submit" @click="primaryPage">首页</button> <button class="btn btn-default" type="submit" @click="prePage">上页</button> <button class="btn btn-default" type="submit">{{current_page}}/{{Math.ceil(arrs.length/pagesize)}}</button> <button class="btn btn-default" type="submit" @click="nextPage">下页</button> <button class="btn btn-default" type="submit" @click="lastPage">尾页</button> </div>
computed:{ page_arrs(){ let {currentPage,pagesize} = this return this.arrs.slice((currentPage-1)*pagesize,currentPage*pagesize) }, current_page(){ return this.currentPage }
},
methods: { primaryPage(){ this.currentPage = 1 }, prePage(){ if(this.currentPage == 1){ return } this.currentPage = this.currentPage - 1 }, nextPage(){ if(this.currentPage == Math.ceil(this.arrs.length/this.pagesize)){ return } this.currentPage = this.currentPage + 1 }, lastPage(){ this.currentPage = Math.ceil(this.arrs.length/this.pagesize) } },