vue 假分页

今天药忘吃喽~ 2022-11-20 10:55 137阅读 0赞

# vue3 #

因某原因，后端一次性返回所有数据，无分页字段，只能自己实现假分页。  
需要准备俩个数组。一个展示，一个分割  
组件

// 总数据就是总页数
    			this.totalPage = this.list.length
                // 给加分页列表初始化
                let temp = JSON.parse(JSON.stringify(this.list))
                // 因为splice不是纯函数会改变源数据结果这里temp一下，记得Stringify不然也会改变源数据
                this.pageList =  temp.splice(0,this.pageSize)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]

handleSizeChange(val) { 
          // 只要换页数就直接返回1页
          this.pageSize = val;
          this.currentPage = 1;
          this.pageList = this.list.slice(0, this.pageSize);
        },
        handleCurrentChange(val) { 
          this.currentPage = val;
          if (val == 1) { 
            this.pageList = this.list.slice(0, this.pageSize);
            return;
          }
          // 当前页 - 1 * 页数 = 分割开始数 比如二页 - 1 = 1*page
          val = (val - 1) * this.pageSize;
          // 分割结束数 = 分割开始数 + this.pageSize
          this.pageList = this.list.slice(val, val + this.pageSize);
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221120/aa79ac2388874a079ba318e511d984ef.png