vue基于elementUi筛选后分页恢复默认第一页(也可用回显页)_vue中element <el-pagination使用sync筛选后分页页码恢复到第一页-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42221334/article/details/89310939

在Vue项目中使用ElementUI时，遇到一个问题：筛选后分页页数未能恢复到默认的第一页。通过在分页组件上添加`:current-page.sync="pageNo"`属性，可以确保在筛选操作后页数重置为1。这种方法同样适用于页面回显时设置存储的页数，提供了一种有效解决筛选和回显页面页数问题的方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：默认打开页面，分页是1；当点第二页之后再进行筛选位置，没加恢复之前接口传的页数还是2，返回第二页的数据；

需求：当更改筛选时添加让页数更改为默认1；

这时要添加:current-page.sync="pageNo" 当前页

<div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"//选第几页事件
        background
        :page-size="12"
        layout="prev, pager, next"
        :total="total"
        prev-text = " 上一页 "
        next-text = " 下一页 "
        :current-page.sync="currentPage"//页面展示第几页效果
      ></el-pagination>
    </div>

handleCurrentChange: function(currentPage){
        var that=this;
        that.currentPage = currentPage;//点击第几页
        this.initList()//然后再请求接口获取数据
      },


searchPositions(index) {//选择地区
        var setslaughterSearch=JSON.parse(localStorage.getItem("setslaughterSearch"));
        this.bgChange(".positions", index);
        if(index>0){
          this.ScityList=this.cityList[index-1].city_id
          setslaughterSearch.area_id=this.ScityList
          localStorage.setItem('setslaughterSearch',JSON.stringify(setslaughterSearch));
        }else{
          this.ScityList="",
          setslaughterSearch.area_id=""
          localStorage.setItem('setslaughterSearch',JSON.stringify(setslaughterSearch));
        }
        this.currentPage=1   // 主要部分 让选择的第几页恢复为
        this.initList()      //然后再请求接口获取数据
      },

此方法也可以做回显页面时设置存储的页面数；

更多技巧请查看vue专栏 https://blog.youkuaiyun.com/qq_42221334/column/info/27230/1