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（若是帳號被擠掉，退出的時候須要多考慮一下）

實現思路是這樣，具體代碼要根據實際項目開發