1. 前言

这篇文章主要记录下el-pagination分页组件超限请求2次的问题解决

2. 是什么 what

1. 表现
   分页.png
   
   

   2.比如现在总共是642条,每页10条,然后点到最后一页65页

3.最后点击每页条数选择最大的比如100

4. 2次.png
5. 这个时候elementui会进行一些逻辑处理,然后发送2次请求

6. 2次请求,正常有1次是请求不到数据的,比如上面的65页.每页100条,后端是查询不到的
7. 但是7页,100条是可以查询到数据的

3. 问题 赋值?

这2次的请求是异步的,最终哪个先执行完就不确定了,导致前端赋值会有问题,因为是一套接口,一个逻辑,如果是请求不到的 那个数据最后执行界面就不显示数据了

4. 解决方案

1. 后端处理后端判断在超限的情况下,返回正常的页码数据

2.这样不用纠结哪个先返回,反正返回的数据是一样的,都有数据

2. 前端处理方式1

1. 在这个选择页码的时候 每次都让 page为1进行重新请求,

 <el-pagination
      @size-change="handleSizeChange"
  >
    </el-pagination>

 handleSizeChange(val) {
       this.listQuery.page = 1
       this.getList()
        console.log(`每页 ${val} 条`);
      },

2. 这个主要看用户, 产品 ,测试能不能接受

3. 前端处理方式2

1. 前端增加逻辑,让页码超限的时候不进行请求,就是那次空请求 直接拦截掉不让请求

 const totalPage = Math.ceil(this.pageTotal / this.listQuery.size);
            if(this.listQuery.page > totalPage && this.listQuery.page != 1){
                return
            }

10. 后记

1. 感谢支持 好久不登录了,工作不易,大家共勉
2. 简单记录下,避免自己迷路

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉