使用keep-alive时，el-table的滚动条设置问题
程序员文章站
2022-03-12 22:26:39
在项目中使用了keep-alive来缓存组件，且使用elementUI中的table列表，现在需求是在列表点进详情后再返回出来，el-table的滚动条和点进详情时保持一致。默认情况下返回滚动条会自动置顶，但直接对scrollTop赋值没有效果，使用$nextTick也是没有效果。但是使用setTimeout可以赋值成功。代码如下： ...
在项目中使用了keep-alive来缓存组件，且使用elementUI中的table列表，
- 现在需求是在列表点进详情后再返回出来，el-table的
滚动条和点进详情时保持一致。
默认情况下返回滚动条会自动置顶，
但直接对scrollTop赋值没有效果，使用$nextTick也是没有效果。
但是使用setTimeout可以赋值成功。
代码如下：
<template>
<div class="table">
<el-table ref="table">
...
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
scrollTop: 0
}
},
//路由守卫
beforeRouteEnter:(to,from,next)=>{
//从详情跳转
if (from.path == '/detail') {
next(vm=>{
// 设置缓存的滚动条位置
setTimeout(() => {
vm.$refs.table.bodyWrapper.scrollTop = vm.scrollTop
}, 10);
//使用$nextTick没有效果
// vm.$nextTick(()=> {
// vm.$refs.table.bodyWrapper.scrollTop = vm.scrollTop
// })
})
}
},
mounted() {
//打开详情
openDetails(row){
// 保存进度条位置后跳转
this.scrollTop = this.$refs.table.bodyWrapper.scrollTop
this.$router.push('/detail')
},
}
}
</script>
可能与宏任务相关，但具体什么原因还请各位大佬留言解惑。
本文地址：https://blog.csdn.net/m0_49343686/article/details/112571129
上一篇： 关于前台的一些事情
下一篇： JavaScript的一些设计原则