iview 分页改变每页条数时请求两次问题

武昌库里写JAVA2025-05-05 18:14

问题

在iview page分页的时候，修改每页条数时，会发出两次请求。
iview 版本是4.0.0

原因

iview 的分页在调用@on-page-size-change之前会调用@on-Change。默认会先调用@on-Change回到第一页，再调用@on-page-size-change改变分页显示数量

此时就会出现回到第一页，在返回调用@on-page-size-change时的页数，造成当前页没有数据。

举个例子，就是点击最后一页然后修改每页条数就是@on-page-size-change，但这是会先调用@on-Change回到第一页获取数据，然后在调用@on-page-size-change回到最后一页获取数据，就会出现错误，因为每页条数改变后就没有那么多页了，出现分页样式错误和没有数据。

解决

在@on-page-size-change事件中，判断pageNum === 1时在调用this.getList();获取数据，这时就只调用一次。

复制代码

     // 修改页数
    changePageNum(no){
      this.pageOptions.pageNo = no;
      this.getList();
    },
    // 修改每页大小
    changePageSize(size){
     this.pageOptions.pageSize = size;
     this.pageOptions.pageNum === 1 && this.getList();
    },

结果就是改变每页条数之后回到第一页并根据修改后的每页的条数获取数据。

这是本人在使用iview的分页的时候遇到的问题。这里讲的可能不是很清楚，请谅解。可以到github上看别的讲解传送门

喜欢的朋友记得点赞、收藏、关注哦！！！