场景：
先放一段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>