Iview 结合vuex 监听 Table组件滚动 返回保持之前的位置

为了这个问题是各种搜，最后的结果是没搜到，我写下我的解决方案吧，其实挺简单的。

image.png

首先最重要的你得先找到Table组件中的table，就是这个class：ivu-table-body。然后在mounted方法中找到这个dom元素，并监听他的scroll。（created方法中拿不到dom元素），因为在created方法中dom元素还没有渲染完成。

   mounted() {            document.getElementsByClassName('ivu-table-body')[0].addEventListener('scroll', (event) => {                // console.log(event.target.scrollTop);
                console.log(event);                this.tableScroll = event.target.scrollTop;
    
            });
        },

这个event里是什么呢。请看下面

image.png

然后继续往target里看，里面有很多属性，直奔最下面，

image.png

那么怎么结合vuex来使用呢？

state中const state = {    transobjectData:{},//为了记录transobject页面的数据};
mutations.js中export default{
    SET_TransObjectData(state,transobjectData){
        state.transobjectData = transobjectData;
    }
}
getters.js中export default{    getTransObject:(state) => state.transobjectData,
}

vuex配置好之后，然后在路由发生变化的时候，存下数据

   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,//数据
                    page: this.page,//当前第几页
                    scroll: this.tableScroll, //存储滚动
                });
            } else {                this.$store.commit('SET_TransObjectData', {});
            }            // this.$store.commit('SET_IndexScroll', position) //离开路由时把位置存起来
            next()
        },

当再次进入这个路由的时候,再created方法中搞个恢复数据的方法recoveryData

   recoveryData() { //恢复数据
                var d = this.$store.state.transobjectData;//拿到数据
                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(() => {//这里要延迟下滚动
                        document.getElementsByClassName('ivu-table-body')[0].scroll(0, d.scroll);
                    }, 400)                    return;
                }
            },

好了这就是这个问题的解决办法。

想到了之前搞过一个相似的问题，直接贴出解决办法，是页面返回到原来的位置。

离开的时候存下数据
     beforeRouteLeave(to, from, next) {            let position = window.scrollY //记录离开页面的位置
            if (position == null) position = 0
            this.$store.commit('SET_IndexScroll', position) //离开路由时把位置存起来
            next()
        },

回来的时候直接刷新。

   popScrollY() {                let indexScrollY = this.$store.state.indexScrollY                window.scroll(0, indexScrollY)
            },

作者：butterflyer
链接：https://www.jianshu.com/p/dd1007becd74