頁面跳轉反顯（點擊項，點擊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（如果賬號被擠掉，退出的時候需要多考慮一下）
實現思路是這樣，具體代碼要根據實際項目開發