基于keep-alive实现缓存table浏览位置

前言

业务想要从列表页进到详情页,再返回的时候,表格浏览的位置还在, 还固定在那一行

多方考虑包装成自定义指令

自定义指令

1.封装指令 tableRollBack.js

import Vue from "vue";
import store from "@/store";
/**
 * keep-alive下 缓存表格滚动条
 * v-tableRollBack="payLoads"
 * payLoads来源于mixins
 */
Vue.directive("tableRollBack", {
  bind(el, binding) {
    let name = binding.value.split("-")[0];
    const selectWrap = el.querySelector(".el-table__body-wrapper");
    selectWrap.addEventListener("scroll", function() {
      store.commit("payLoads/setPayLoads", {
        name,
        top: this.scrollTop,
        left: this.scrollLeft
      });
    });
  },
  componentUpdated(el, binding) {
    let name = binding.value.split("-")[0];
    const selectWrap = el.querySelector(".el-table__body-wrapper");
    let _left = store.state.payLoads.payLoads[name + "-left"] || 0;
    let _top = store.state.payLoads.payLoads[name + "-top"] || 0;
    setTimeout(() => {
      selectWrap.scrollTo(_left, _top);
    }, 200);
  }
});

2.stroe中存数据

store/payLoads.js

const state = {
  payLoads: {}
};
const mutations = {
  setPayLoads(state, param) {
    state.payLoads[param.name + "-top"] = param.top;
    state.payLoads[param.name + "-left"] = param.left;
  }
};
export default {
  namespaced: true,
  state,
  mutations
};

3.混入一些公共操作

utils/payLoads.js

export default {
  data() {
    return {
      payLoads: this.$route.name + "-" + new Date().getTime()
    };
  },
  activated() {
    this.payLoads = this.$route.name + "-" + new Date().getTime();
  }
};

指令写完记得在main.js中注册

4. 目标页面使用

<!-- template -->

<el-table
 v-tableRollBack="payLoads"
...
>
  </el-table>

<!-- script -->
import payLoads from "@/utils/payLoads.js";

export default {
 ...
  mixins: [payLoads]
}

后记

没看到用keep-alive啊,怎么说是基于这个呢,activated有用到这个方法,这个是keep-alive特有的钩子函数