博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项
阅读量:4607 次
发布时间:2019-06-09

本文共 3508 字,大约阅读时间需要 11 分钟。

页面跳转反显(点击项,点击table滚动的位置,搜索条件,分页回显)

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

思路:

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

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)     }}

2.进入页面取出sessionStorage,在init请求返回值后,进行table选中、分页回显;

data(){    return {        paginationShow: false, 控制分页器显示 页面中使用v-if        pager:{             total: 0,            currentPage: 1,            pageSize: 20,        }    }}

控制分页器显示的原因:vue-element-ui项目分页,在返回默认分页高亮样式不会回显......

造成的原因:我们返回当前页面取得总条数totalNum之前,element-ui的分页组件已经在页面加载完毕,当时的totalNum绑定的是data里面初始化的数据0,所以当总条数为0的时候,分页组件的页码默认为1。并且当totalNum在created生命周期里取得数据后,分页组件也不会刷新。所以这就导致, 页面内容正确,但是页码高亮依旧是第一页。

解决办法:我们需要在created之后刷新这个分页组件或者让分页组件的html后于created之后加载到页面。再次刷新这个分页组件是不现实的,我们选择在created之后加载分页组件。具体办法就是使用v-if。在totalNum不为data里面给的初始值0的时候,才让这段html加载到页面。

init () {    axios.post('/url',param).then(function (response) {    // 进行数据复制loading等操作     if(!myVM.paginationShow){         if(myVM.storeId){                **myVM.$nextTick(function(){**                    var storage = [];                    myVM.dataTable.forEach(function(item, index){                           if(item.clueId === myVM.storeId ){                               storage.push(myVM.dataTable[index]);                           }                    })                   myVM.toggleSelection(storage);                    // 根据存储的滚动位置,将table滚动位置回显在页面上                   **myVM.$el.querySelector('.el-table__body-wrapper').scrollTop = mycustomVM.scrollTop; **                                               })          }      }else{          myVM.removeSessionStore ("storeForm");          myVM.removeSessionStore ("otherVal");      }      mycustomVM.paginationShow = true;      mycustomVM.storeForm = mycustomVM.form;     })},toggleSelection(rows) { // table select 默认选中     if (rows) {         rows.forEach(row => {              this.$refs.multipleTable.toggleRowSelection(row,true);         });      } else {         this.$refs.multipleTable.clearSelection();     }},toLink(row){   // 跳转进行存储     var clueId=row.clueId;     this.setSessionStore("storeForm", this.storeForm);     var otherVal = {              "currentPage": this.pager.currentPage,              "clueId": clueId,               "scrollTop": **this.$el.querySelector('.el-table__body-wrapper').scrollTop**     }    this.setSessionStore("otherVal", otherVal);    window.location.href='跳转链接,可携带参数';},     mounted(){    document.getElementById('myVue').style.display = 'block';  },created(){  // 进入页面判断有是否有存储值,取出后,进行初始化init函数   if(!this.paginationShow){       var storeVal = this.getSessionStore("storeForm");       var otherVal = this.getSessionStore("otherVal");       if(storeVal && otherVal){          this.form = storeVal;          this.$set(this.pager,"currentPage",otherVal.currentPage);          this.storeId = otherVal.clueId;          this.scrollTop = otherVal.scrollTop;       }   }}window.sessionStorage.clear(); // 点击侧边栏、退出时-清除所有cookie(如果账号被挤掉,退出的时候需要多考虑一下)

实现思路是这样,具体代码要根据实际项目开发

转载于:https://www.cnblogs.com/lisaShare/p/11025872.html

你可能感兴趣的文章
Minimum Path Sum
查看>>
Remove Duplicates from Sorted Array II
查看>>
常量指针和指针常量巧妙记忆方法[转]
查看>>
python-haproxy作业讲解视频总结
查看>>
mui搜索框 搜索点击事件
查看>>
select2 下拉搜索控件
查看>>
WebAPI常见的鉴权方法,及其适用范围
查看>>
08. 删除重复&海量数据
查看>>
重新想象 Windows 8 Store Apps (71) - 其它: C# 调用 C++
查看>>
发布mvc遇到的HTTP错误 403.14-Forbidden解决办法
查看>>
记录一些好用的工具
查看>>
超链接样式设置(去下划线)(转)
查看>>
2016012003+陈琦+散列函数的应用及其安全性
查看>>
Android 状态栏通知Notification、NotificationManager详解
查看>>
UIApplicationDelegate协议
查看>>
Jmeter测试dubbo接口填坑
查看>>
[zz]GDB调试精粹及使用实例
查看>>
数据库的创建和删除
查看>>
最简单的三层实例【插入据
查看>>
设计模式学习笔记——Prototype原型模式
查看>>