element UI 分页组件使用中遇到的问题

场景：

先放一段elementUI分页组件的代码，这里选取的是分页的全部功能：

<el-pagination
      :current-page="currentPage"                       //当前页码（4）
      :page-sizes="[100, 200, 300, 400]"                 //分页时可选择每页显示多少条
      :page-size="100"                                   //默认每页条数
      layout="total, sizes, prev, pager, next, jumper"   //组件布局，子组件名用逗号分隔
      :total="400"                                       //一共多少条
	  @size-change="handleSizeChange"                    //切换每页显示多少条
      @current-change="handleCurrentChange"              //翻页的时候，记录当前是第几页
</el-pagination>

methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage: 4
      };
    }

---

问题描述：

使用element UI的分页组件时，每次翻页的时候记录当前的页码
由于目前的项目分页时调用的是查询接口，所以当没有查询条件的时候，希望可以正常传当前页码到后端，
有查询条件的时候，默认currentPage = 1（如果不等于1，当不在第一页的时候使用查询，页码不会回到第一页）

// 分页
    handleSizeChange(size) {
      this.pageSize = size  //每页条数
      this.search()  //翻页时调用的接口
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage  //翻页的时候，记录当前是第几页
      this.search() //翻页时调用的接口
    },

---

原因分析：

组件提供了一个方法：current-change
只有在当前页发生变化的时候才触发，翻页时记录了当前页码，刷新时没有触发，所以回不到第一页，只有去强制设置currentPage = 1

---

解决方案：

在调用接口的时候多加了一个参数，判断参数true或false来选择要不要将currentPage的值设置为1

以下是部分代码：

    // 分页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.search(false)  // 设为false表示不需要更改currentPage的值
    },

// 查询接口
    async search(y) {
      // 如果是调用查询，就更改currentPage
      if (y !== false) {
        this.currentPage = 1
      }
      //调用接口
      const res = （接口名称）({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        …… ……  //其他参数这里不展示了
      })
      this.total = res.data.total  //后端返回的，一共多少条数据
    }

页面上，这里一定要写上true，来区分调接口时是分页还是查询

<el-button type="primary" @click="search(true)" >查询</el-button>