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

页面跳转反显（点击项，点击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（如果账号被挤掉，退出的时候需要多考虑一下）

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

来源：oschina

链接：https://my.oschina.net/u/4274692/blog/3499852

标签

html5

Vue.js

element