目标

image-20240116222725177

如图，这里需要实现的是，切换不同tab时，分页器的当前页数要重置到第1页，同时向后端发送的请求里面的page参数也要重置为1。

方法

修改tab切换时绑定的tabChange函数

设置params.value.page为1即可。

const params= ref({
  orderState:0,
  page:1,
  pageSize:2
})
// tab切换
const tabChange=(type)=>{
  params.value.page=1
  params.value.orderState=type
  // 重新获取数据
  getOrderList()
}

修改el-pagination

使用current-page.sync进行双向绑定。

添加v-model:current-page.sync="params.page"，其中params.page即script区定义的params里面的page。

<el-pagination :total="total" :page-size="params.pageSize" v-model:current-page.sync="params.page"
                           @current-change="pageChange" background layout="prev, pager, next" />

参考链接

elementUI分页中改变current-page绑定的值无效问题的解决_分页组件js直接修改页码绑定值不触发事件-CSDN博客

elementui 分页el-pagination遇到的所有坑（current失效、分页组件不显示、视图不改变等）_el-pagination current-page问题-CSDN博客