[ElemeFE/element]pagination组件手动设置currentPage=1,会触发两次请求?

2024-08-13 771 views
8

为pagination组件绑定handleCurrentPage事件,切换页码,搜索条件后将页码重置为1,会发两次请求,一次是搜索的请求,还有一次是分页绑定的handleCurrentPage事件,如何解决这个问题?

回答

4

我也遇到同样的问题了,我是最新的版本1.2.4,上个版本还木有。。。

0

补充问题:我是非手动设置都会触发。 这种情况会发送在一种特定情境下。如果当前有好几页,只要当前的currentPage 不在第1页的话,切换pageSize,除了会触发 size-change事件,还会触发 current-change 事件 . 分页默认配置: currentPage:1, pageSize:1, pageSizes:[1,2,3], total:6 当切换currentPage到不是1时,再切换pageSize时,这时会提交2次到服务器的请求 第1次请求分页配置:currentPage=1,pageSize:3 第2次请求分页配置:currentPage=1,pageSize:1 目前这个影响还比较广,我升级了之后,所有的页面都酱紫了,囧。。。不得不降版本。

3

@ @AnyGong 可以在触发currentPage事件中先设置一个flag=true,currentPage事件中判断为true的时候执行initData方法,其他排序,搜索,size-change,新增的方法中设置flag=false,并且设置currentPage=1。

4

我今天遇到一个类似的情况,第一次换页发两次事件,第二次换页开始发三次事件。

我的场景是给 :current-page="currPage + 1",如果我把 + 1 去掉的话就正常。

4

我现在也遇到这个问题了~~~是1.2.7最新版本

1

郁闷啊!这问题好奇葩啊 1.2.8页有这问题

8

我也遇到了,会多次发请求

3

只要current-page 发生改变,不管是点击分页还是手动出发改变,这确实是个头疼的问题。目前,我是通过设置flag加层判断

6

可以先在data里面设置flag: true,在handleCurrentChange方法里面,请求之前加上一个if (this.flag) {执行请求},然后在其他搜索方法之后加上this.flag = false,this.currentPage = 1, setTimeout(() => {this.flag = true}, 1000)就不会导致组件多去请求了。

4

我也是增加了一个flag专门来做处理

4

组件这样触发是对的,至于业务逻辑上的重复触发应该有写业务的来处理,今天用最新版的也遇到了这个问题,情况是当前页码是第3页,我变化了一下Size为100,然后页码变成了第1页,2个事件处理函数都触发了,我是这样处理的

     handleSizeChange: function (size) {
        this.page.pageSize = size
        setTimeout(this.getTableData)
      },
      handleCurrentChange: function (current) {
        this.page.current = current
        setTimeout(this.getTableData)
      },
      getTableData: function () {
        if (this.page.loading) return
        this.page.loading = true
      }

加了一个loading限制住了,但我觉得这样做非常不优雅,是不是应该在 handleSizeChange事件里面把变化后的 size和 current都传一下,然后和props的 current对比一下,比如这样

     handleSizeChange: function (size, afterChangeCurrentPage) {
        this.page.pageSize = size
        // 说明size变了但是页码没变, 触发加载数据
        if (this.page.current === afterChangeCurrentPage) {
           this.getTableData()
        }
        // 页码变动了就只触发 页码处理函数
      }
9

Fixed in #10247