为pagination组件绑定handleCurrentPage事件,切换页码,搜索条件后将页码重置为1,会发两次请求,一次是搜索的请求,还有一次是分页绑定的handleCurrentPage事件,如何解决这个问题?
[ElemeFE/element]pagination组件手动设置currentPage=1,会触发两次请求?
回答
我也遇到同样的问题了,我是最新的版本1.2.4,上个版本还木有。。。
补充问题:我是非手动设置都会触发。
这种情况会发送在一种特定情境下。如果当前有好几页,只要当前的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
目前这个影响还比较广,我升级了之后,所有的页面都酱紫了,囧。。。不得不降版本。
@ @AnyGong 可以在触发currentPage事件中先设置一个flag=true,currentPage事件中判断为true的时候执行initData方法,其他排序,搜索,size-change,新增的方法中设置flag=false,并且设置currentPage=1。
我今天遇到一个类似的情况,第一次换页发两次事件,第二次换页开始发三次事件。
我的场景是给 :current-page="currPage + 1"
,如果我把 + 1
去掉的话就正常。
我现在也遇到这个问题了~~~是1.2.7最新版本
郁闷啊!这问题好奇葩啊 1.2.8页有这问题
我也遇到了,会多次发请求
只要current-page 发生改变,不管是点击分页还是手动出发改变,这确实是个头疼的问题。目前,我是通过设置flag加层判断
可以先在data里面设置flag: true,在handleCurrentChange方法里面,请求之前加上一个if (this.flag) {执行请求},然后在其他搜索方法之后加上this.flag = false,this.currentPage = 1, setTimeout(() => {this.flag = true}, 1000)就不会导致组件多去请求了。
我也是增加了一个flag专门来做处理
组件这样触发是对的,至于业务逻辑上的重复触发应该有写业务的来处理,今天用最新版的也遇到了这个问题,情况是当前页码是第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()
}
// 页码变动了就只触发 页码处理函数
}
Fixed in #10247