需求:缓存页面 保留表格滚动条位置
发现页面是用avue-crud写的
avue没有提供滚动条位置的监听功能
解决办法:
打印 $refs 查找到 avue-crud的scrollTop的位置
<avue-crud ref="crud">
</avue-crud>
console.log('this.$refs.crud: ', this.$refs.crud);
console.log('this.$refs.crud: ', this.$refs.crud.$refs.table.bodyWrapper.scrollTop);
keep-alive 缓存
<keep-alive>
<router-view/>
</keep-alive>
页面deactivated 记录scrollTop位置
deactivated(){
this.scrollTop = this.$refs.crud.$refs.table.bodyWrapper.scrollTop
},
页面activated 设置滚动条位置,注意要设置延时 不然不生效
activated(){
this.$nextTick(() => {
setTimeout(() => {
// 设置滚动条的位置
// 需要设置延迟,否则不生效
this.$refs.crud.$refs.table.bodyWrapper.scrollTop = this.scrollTop
}, 100)
})
},