vue+el-table翻页后进入其他页面后返回时记忆当时页面和分页数字高亮

最新推荐文章于 2024-04-01 14:42:06 发布

原创最新推荐文章于 2024-04-01 14:42:06 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #typescript

vue+el-table翻页后进入其他页面后返回时记忆当时页面和分页数字高亮

el-table与el-pagination都是封装过的，想了解可以去我主页找到相应的文章。
场景：后台返回的数据进行分页后，每个item都有对应的“日志功能”，点击日志会跳转到新的路由，有对应的返回按钮通过router.go(-1)(或者back)返回上一页，返回上一页必须是用户当时选择“日志”的页面。
问题：通过$router.go(-1)返回上一页后页面刷新，自动跳转到第一页。
踩坑：在列表页通过el-pagination中@current-change方法的返回值能拿到用户当前选中的页码（不知道的可以参考element 文档），再通过sessionStorage缓存下用户所跳转的页面页码，在列表页的created生命周期函数中获取sessionStorage缓存中用户跳转的页码，赋值给pageIndex。这种方法解决了pagination的高亮问题，在我测试中，第二页时缓存中PageIndex为2,这是正确的，在第二页刷新页面或者进入另一场景再返回时，页面仍然跳转到第一页。
解决：直接发代码：

  private formChange() {
    const newObj: any = {};
    let key = "";
    for (key in this.form) {
      newObj[key] = this.form[key] ? String(this.form[key]) : "";
    }
    const params = {
      PageIndex: String(this.page.PageIndex),
      rnd: String(Math.random()),
      ...newObj,
    };
    console.log(params);
    this.$router.push({ path: "/ioc/scheduler", query: params });
  }

  public form: any = {
    jobName: "",
    jobStatus: "",
    taskGroup: "",
    taskName: "",
    skipCount: 0,
    maxResultCount: 20,
  };

  private page = {
    PageIndex: 1,
    PageSize: 20,
    PageTotal: 0,
  };

封装了一个formChange方法，在点击pagination页面跳转时触发这个方法

  public pageChange(e: number) {
    this.page.PageIndex = e;
    console.log(e);
    this.searchForm.skipCount = nextPage(e, this.page.PageSize);
    this.formChange();
    this.getProductList();
  }

封装init方法

  private init() {
    const params = this.$route.query;
    if (params["maxResultCount"]) {
      let key = "";
      for (key in this.form) {
        if (key == "maxResultCount" || key == "skipCount") {
          this.form[key] = Number(params[key]);
        } else {
          this.form[key] = params[key] || "";
        }
      }
      this.page.PageIndex = Number(params["PageIndex"]) || 1;
    }
  }

在created中触发

  async created() {
    this.init();
    this.getTableList();
    await this.$IOCApi.checkAllJobs();
  }

页面就可以实现记忆功能。