前端手动分页

一种比蜗牛爬行还慢的生物

已于 2022-08-17 10:48:19 修改

阅读量160

点赞数

文章标签：前端开发 Vue.js 分页数据处理用户体验

于 2022-08-08 16:33:29 首次发布

本文链接：https://blog.csdn.net/weixin_49519788/article/details/126230371

版权

前端手动分页

<div class="">
     <div class="role_box" v-for="(item,index) in rolelistPage[rolePageNum-1]" :key="index">
         <div class="rolemar">{{item.name}}</div>                  
      </div>                        
</div>

 <div class="fenye">
     <a-pagination 
     :total="roleListes.length" 
     showQuickJumper 
     v-model:current="rolePageNum" 
     :page-size="rolePageSize"/>
</div>

//data中
 rolelistPage: [],
 rolePageNum:1,
 rolePageSize:10,
 roleTotal:0,

//封装的公用方法
 bulidRoleListes(data){
    if (data == null){
           return []
       }
       let newData = []
       let list = []
       for (let i = 0; i < data.length; i++) {
           if(i % this.rolePageSize == 0){
               list = []
               newData.push(list)
           }
           const element = data[i];
           list.push(element)
       }
       return newData
   },

//调用
 this.rolelistPage =  this.bulidRoleListes(res.data.resultData.resultData)