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

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

2、思路：利用自定义指令给element的表格绑定，监听滚动条变化并记录，然后设置一个变量，在activated里面触发自定义指令，获取滚动条的记录并设置

3、实现：

自定义全局指令

Vue.directive('tableRollBack', {
    bind(el) {
        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)
    }
})

自定义混入payLoads.js

export default {
    data() {
        return {
            payLoads: ''
        }
    },
    activated() {
        this.payLoads = new Date().getTime()
    }
}

在页面引用

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

引入混入

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

 4、效果