vue+element-ui的项目使用分页器,跳转后再返回时高亮问题

1.页面所需相关操作如下:

第一步:如下是班级管理模块的页面,跳转到班级管理的详情页面

vue+element-ui的项目使用分页器,跳转后再返回时高亮问题_第1张图片

 第二步: 再从班级管理详情页面返回到班级管理页面时,班级管理页面应该显示的是原先所选择的第5页

vue+element-ui的项目使用分页器,跳转后再返回时高亮问题_第2张图片

第三步:其它页面点击跳转到该页面(如班级管理页面)时,应该为第一页(显示初始数据)

vue+element-ui的项目使用分页器,跳转后再返回时高亮问题_第3张图片

2.代码

初始列表页面(班级管理)页面代码:

//html

     

//js

data() {
    return {
      
      pageSize: 15, //每页大小,默认15条记录,每页显示条目个数
      pageCount: 1, //当前页数
      Alltotal: 0, //总数量
      tableData: [] 
    };
  },
 created() {
     
    this.pageCount = Number(localStorage.getItem("pageCount")) || 1;
    this.getlistData();//获取列表数据方法
  },
  mounted() {
    this.pageCount = Number(localStorage.getItem("pageCount")) || 1;
    this.handleCurrentChange(this.pageCount);
  },

  beforeUpdate() {
    localStorage.setItem("pageCount", this.pageCount);
  },

  beforeDestroy() {
    localStorage.setItem("pageCount", 1);
  },

 在这里基本已经实现了上述所需操作了,但是我们还要当别的侧边栏页面(或者其它页面)点击进入该页面时是显示初始数据,即所选择的分页器为1,而不是先前选择的5.

 

第三步骤实现方法:

在点击进入详情页面时,在详情页面销毁掉原先保存的pageCount(当前页数)

在详情页面(班级管理详情页面)加上下面代码即可:

 beforeUpdate () {   
        localStorage.setItem('pageCount', this.$route.query.pageCount)
    },

 好了,所需功能完成,希望对大家有所帮助~

你可能感兴趣的:(element-ui,vue)