vue element-ui table 滚动条位置缓存

需求：

浏览器不关闭的情况下，每次进入指定页面，element-ui table的滚动条保留在上次离开页面时的位置；

开发步骤：

1、经过代码测试，在vue里面给el-table 添加ref来获取元素dom，然后给refs设置scrollTo(left,top)无效；

2、添加自定义指令可以获取和设置元素属性和方法，给class为el-table__body-wrapper的元素绑定滚动事件，监控右侧滚动条和底部滚动条的位置，并且使用sessionStorage存储起来；

3、使用自定指令（directives ），被绑定元素所在模板完成一次更新周期时调用，来设置class为el-table__body-wrapper的scrollTo();

 

具体代码如下：

1，添加自定义指令

const loadMore = Vue.directive('loadMore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper');
    selectWrap.addEventListener('scroll', function() {
      window.sessionStorage.setItem('loadTop',this.scrollTop);
      window.sessionStorage.setItem('loadLeft',this.scrollLeft);
    });
  },
  componentUpdated(el){
    const selectWrap = el.querySelector('.el-table__body-wrapper');
    let l = window.sessionStorage.getItem('loadLeft') || 0;
    let t = window.sessionStorage.getItem('loadTop') || 0;
    setTimeout(()=>{
      selectWrap.scrollTo(l,t);
    },200);
  },
  update() {}
})

export default{
  visible,demo,enable,dialog,nodata,functionbar,loadMore
}

2、将v-loadMore指令绑定到el-table

····

3、我这里使用了keep-alive缓存，所以使用生命周期函数来改变payLoads的值，这样自定义指令的钩子函数componentUpdated(el)每次页面切换的时候才能执行。

activated() {
  this.payLoads = new Date().getTime();
},