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();
},