由于业务需要 公司把后台所有数据一次性给前端,数据过多,所以前端需要做一些分页的处理,比较简单的翻页。
html代码
<table class="three_td"> <tbody> <tr v-for="item in listt2"> <td><a v-text="item.sort"></a> </td> <td><a v-text="item.Branch"></a></td> <td><a v-cloak>{{item.Data}}</a></td> <td><span v-text="item.Good"></span></td> </tr> </tbody> </table> <div class="pages" v-show="onn"> <button class="previem" @click="page('last')" v-show='curPage>0'>上一页</button> <button class="next" @click="page('!last')" v-show="curPage<pageCount-1">下一页</button> </div>
js代码配置
data:{ listt2:[],//页面要展示的数据 pageSize:100,//翻页每页显示数据 curPage:0,//当前页面 pageCount:'',//总共页面数 onn:true,//默认显示分页 rongliang:[] }, created:function(){ //ajax获取后台数据,这里就不做了获取的数据存储在 this.rongliang。 }, methods:{ page:function(el){//点击翻页 el=='last'?this.curPage--:this.curPage++; var curtotal=this.curPage*this.pageSize; var tiaoshu=this.curPage*this.pageSize+this.pageSize; this.listt2=this.rongliang.slice(curtotal,tiaoshu); document.body.scrollTop = 0; }, fanye:function(){//分页处理 var _this=this; _this.listt2=[]; if(_this.rongliang){ _this.pageCount=Math.ceil(_this.rongliang.length/_this.pageSize); for(var i=0;i<_this.pageSize;i++){ if(_this.rongliang[i]){ _this.listt2.push(_this.rongliang[i]); }; }; }; }
思路就是每次截取从后台获取的数组rongliang的数据存储到需要展示的那个数组listt2里面。
小知识点:
1.使用slice是从已有的数组中返回选定的元素,而splice向/从数组中添加/删除项目,然后返回被删除的项目,会改变原始数组。
2.v-cloak 需要在css中添加以下代码,优化处理,防止页面加载时看到vue的变量名
[v-cloak] { display: none; }