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