vue2.X简单翻页/分页

由于业务需要 公司把后台所有数据一次性给前端，数据过多，所以前端需要做一些分页的处理，比较简单的翻页。

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;
}