keep-alive里的element表格缓存滚动条

1、需求：用户需要在两个缓存的页面切换查看数据，但是在keep-alive里面的element的滚动条会自动置顶。

2、思路：利用自定义指令给element的表格绑定，监听滚动条变化并记录，同时设置一个变量记录页面并在路由切换时刷新，当页面滚动时记录页面和页面table的位置，当路由切换时就把当前记录的位置设置到当前页面

3、实现：

自定义全局指令

import Vue from 'vue'

import store from '@/store'

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('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 l = store.state.payLoads.payLoads[name+'-left'] || 0

        let t = store.state.payLoads.payLoads[name+'-top'] || 0

        setTimeout(() => {

            selectWrap.scrollTo(l, t)

        }, 200)

    }

})

自定义混入payLoads.js

export default {

    data() {

        return {

            payLoads:this.$route.name+'-'+new Date().getTime()

        }

    },

    activated() {

        this.payLoads = this.$route.name+'-'+new Date().getTime()

    }

}

数据存储在vueX里面

const payLoads = {
    state: {
        payLoads:{}
    },
    mutations: {
        setPayLoads(state, param) {
            state.payLoads[param.name+'-top']=param.top
            state.payLoads[param.name+'-left']=param.left
        }
    },
    getters: {
    },
    actions: {
    }
}
export default payLoads

在页面引用

//在表格插入指令
v-tableRollBack="payLoads"

引入混入

import payLoads from '@/utils/payLoads.js'
export default {
    ...
    mixins: [payLoads],
    ...
}    

 4、效果