iview带有分页的列表的跳转后，返回时怎么实现保留上次翻页记录

最新推荐文章于 2022-12-15 16:41:09 发布

华大哥

最新推荐文章于 2022-12-15 16:41:09 发布

阅读量809

点赞数

分类专栏：前端文章标签：保留上次翻页记录 iview分页跳转保留翻页记录

本文链接：https://blog.csdn.net/lchmyhua88/article/details/110824851

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

本文介绍如何通过本地存储在编辑列表项后自动返回到上次操作的页面，确保用户体验。通过`setContextData`和`getContextData`函数管理页码，并在`mounted`初始化时加载初始页码。

摘要由CSDN通过智能技术生成

在实际使用当中，当我们从列表的某一页去编辑这条信息，那么当编辑完成后我们是不是返回到列表页，那么列表页应该显示第几页的数据呢？我们当然是希望返回到上一次页数记录的位置，而不是首页。

如果我现在编辑完某一条记录保存的时候，那么我希望的是返回的是第三页，其实呢，主需要把翻页的页码最后一次记录保存在localstorage中就可以解决这个问题了

代码如下：

setContextData: function(key, value) {
   let val = value ? value : 1
   localSave(key,JSON.stringify(val))
},
getContextData: function(key){
    return localRead(key) ? parseInt(JSON.parse(localRead(key))) : 1
},

mounted方法里面初始化的时候记录当前页码：

initList(){
    let pageSize = this.pageSize;
    let page = this.getContextData("currentPage");
    let search_from = this.formSearch;
    this.getData(page, pageSize, search_from) // 初始化请求
},

这样就保证了我们在某一页操作完成后，返回的是上一次操作的页面，而不是首页了。