element-ui的分页功能的bug

Question

我的请求回调中有，this.currentPage = 后台给我的当前页码
this.currentSize = 后台给我的每页总条数
el-pagination中 handleSizeChange 触发时，如触发前的当前页不是第0页，在走完回调后，因为currentPage改变了，会在调一次handlePageChange，造成多次请求
请问各位大佬，这个该怎么处理

    handleSizeChange (val) {
      let param = {....}
      this.getList(param)
    }
    handlePageChange (val) {
      let param = {....}
      this.getList(param)
    }
    getList () {
        ....then(res => {
            ....
            this.currentPage = res.currentPage
            this.currentSize = res.currentSize
        })
    }

Answer 1

 methods: {
  getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
  
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      }
  }

给你个地址有你想要的功能
链接描述

Answer 2

this.currentPage = res.currentPage这个语句不需要根据后台返回的值重新赋值，为什么要赋值？handleSizeChange 事件是由于每页列表条数变化引起的数据重新请求，和pageIndex没什么关系，你重新赋值肯定会影响他，只要一改变就会handlePageChange 事件的触发

Answer 3

this.currentPage = res.currentPage要拎出来 放在对应要改变的事件里，但是在handleSizeChange中要判断当前页是否是首页 是的话 直接调用获取列表接口。。假若不是 那么直接调用this.currentPage = 1就行了 自己刚刚做的项目 遇到了同样的问题 已经解决
注：页码改变的过程中就会触发handlePageChange事件 即：已经调用了一次获取列表的接口

Answer 4

在handlePageChange中判断一下 val和this.currentPage的值是不是相等，等于的话直接return；不等于时再调用接口