為了這個(gè)問(wèn)題是各種搜劫瞳，最后的結(jié)果是沒(méi)搜到和媳，我寫(xiě)下我的解決方案吧巴刻，其實(shí)挺簡(jiǎn)單的。
image.png
首先最重要的你得先找到Table組件中的table傍妒，就是這個(gè)class：ivu-table-body幔摸。然后在mounted方法中找到這個(gè)dom元素，并監(jiān)聽(tīng)他的scroll颤练。（created方法中拿不到dom元素）既忆，因?yàn)樵赾reated方法中dom元素還沒(méi)有渲染完成。
mounted() {
document.getElementsByClassName('ivu-table-body')[0].addEventListener('scroll', (event) => {
// console.log(event.target.scrollTop);
console.log(event);
this.tableScroll = event.target.scrollTop;
});
},
這個(gè)event里是什么呢。請(qǐng)看下面
image.png
然后繼續(xù)往target里看尿贫，里面有很多屬性电媳，直奔最下面，
image.png
那么怎么結(jié)合vuex來(lái)使用呢庆亡？
state中
const state = {
transobjectData:{},//為了記錄transobject頁(yè)面的數(shù)據(jù)
};
mutations.js中
export default{
SET_TransObjectData(state,transobjectData){
state.transobjectData = transobjectData;
}
}
getters.js中
export default{
getTransObject:(state) => state.transobjectData,
}
vuex配置好之后匾乓，然后在路由發(fā)生變化的時(shí)候，存下數(shù)據(jù)
beforeRouteLeave(to, from, next) {
this.$debug.log(to);
this.$debug.log(from);
if (to.path == '/transobjectsalelist') {
this.$debug.log(this.data);
this.$store.commit('SET_TransObjectData', {
address: this.address,
data: this.data,//數(shù)據(jù)
page: this.page,//當(dāng)前第幾頁(yè)
scroll: this.tableScroll, //存儲(chǔ)滾動(dòng)
});
} else {
this.$store.commit('SET_TransObjectData', {});
}
// this.$store.commit('SET_IndexScroll', position) //離開(kāi)路由時(shí)把位置存起來(lái)
next()
},
當(dāng)再次進(jìn)入這個(gè)路由的時(shí)候,再created方法中搞個(gè)恢復(fù)數(shù)據(jù)的方法recoveryData
recoveryData() { //恢復(fù)數(shù)據(jù)
var d = this.$store.state.transobjectData;//拿到數(shù)據(jù)
if (d.address == this.address) {
this.$debug.log(d);
this.data = d.data;
this.address = d.address;
this.page = d.page;
this.tableScroll = d.scroll;
setTimeout(() => {//這里要延遲下滾動(dòng)
document.getElementsByClassName('ivu-table-body')[0].scroll(0, d.scroll);
}, 400)
return;
}
},
好了這就是這個(gè)問(wèn)題的解決辦法又谋。
想到了之前搞過(guò)一個(gè)相似的問(wèn)題拼缝，直接貼出解決辦法，是頁(yè)面返回到原來(lái)的位置彰亥。
離開(kāi)的時(shí)候存下數(shù)據(jù)
beforeRouteLeave(to, from, next) {
let position = window.scrollY //記錄離開(kāi)頁(yè)面的位置
if (position == null) position = 0
this.$store.commit('SET_IndexScroll', position) //離開(kāi)路由時(shí)把位置存起來(lái)
next()
},
回來(lái)的時(shí)候直接刷新咧七。
popScrollY() {
let indexScrollY = this.$store.state.indexScrollY
window.scroll(0, indexScrollY)
},
