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();
}
页面就可以实现记忆功能。