Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项

Posted lisashare

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项相关的知识,希望对你有一定的参考价值。

页面跳转反显

点击table tr项后,页面跳转到下级页面,返回回显搜索条件、当前页码、并将点击项select选中、滚动条也被记录回显跳转时滚动的位置

思路:

  1. 页面临时缓存我选择使用sessionStorage,点击tr行将搜索条件和页码,点击行的id进行存储
data()
    return 
        
    

setSessionStore (name, content) 
                if (!name) return
                if (typeof content !== 'string') 
                content = JSON.stringify(content)
                
                window.sessionStorage.setItem(name, content)
            ,
            getSessionStore (name) 
                if (!name) return;
                var content = window.sessionStorage.getItem(name);
                if (typeof content == 'string') 
                    content = JSON.parse(content)
                
                return content;
            ,
            removeSessionStore (name) 
                if (!name) return
                return window.sessionStorage.removeItem(name)
            
  1. 进入页面取出sessionStorage,在init请求返回值后,进行table选中、分页回显

以上是关于Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项的主要内容,如果未能解决你的问题,请参考以下文章

vue+ element-ui el-table组件自定义合计(summary-method)坑

vue element-ui 动态生成el-table 自定义input input赋值问题

Vue.js Element-UI el-table:制作复制表进行编辑,可以将数据保存到原表

vue element-ui el-form el-table 表单查询表格展示(可滚动加载)

Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项

vue+element-ui实现分页