vue element-ui table 滚动条位置缓存
需求:浏览器不关闭的情况下,每次进入指定页面,element-ui table的滚动条保留在上次离开页面时的位置;开发步骤:1、经过代码测试,在vue里面给el-table 添加ref来获取元素dom,然后给refs设置scrollTo(left,top)无效;2、添加自定义指令可以获取和设置元素属性和方法,给class为el-table__body-wrapper的元素绑定滚动事...
·
需求:
浏览器不关闭的情况下,每次进入指定页面,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
<el-table class="page" v-loadMore="payLoads">····</el-table>
3、我这里使用了keep-alive缓存,所以使用生命周期函数来改变payLoads的值,这样自定义指令的钩子函数componentUpdated(el)每次页面切换的时候才能执行。
activated() {
this.payLoads = new Date().getTime();
},
更多推荐
已为社区贡献3条内容
所有评论(0)