在項(xiàng)目中使用了keep-alive來(lái)緩存組件，且使用elementUI中的table列表不皆，
- 現(xiàn)在需求是在列表點(diǎn)進(jìn)詳情后再返回出來(lái)，el-table的
滾動(dòng)條和點(diǎn)進(jìn)詳情時(shí)保持一致熊楼。
默認(rèn)情況下返回滾動(dòng)條會(huì)自動(dòng)置頂霹娄，
但直接對(duì)scrollTop賦值沒(méi)有效果，使用$nextTick也是沒(méi)有效果鲫骗。
但是使用setTimeout可以賦值成功犬耻。
代碼如下：
<template>
<div class="table">
<el-table ref="table">
...
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
scrollTop: 0
}
},
//路由守衛(wèi)
beforeRouteEnter:(to,from,next)=>{
//從詳情跳轉(zhuǎn)
if (from.path == '/detail') {
next(vm=>{
// 設(shè)置緩存的滾動(dòng)條位置
setTimeout(() => {
vm.$refs.table.bodyWrapper.scrollTop = vm.scrollTop
}, 10);
//使用$nextTick沒(méi)有效果
// vm.$nextTick(()=> {
// vm.$refs.table.bodyWrapper.scrollTop = vm.scrollTop
// })
})
}
},
mounted() {
//打開(kāi)詳情
openDetails(row){
// 保存進(jìn)度條位置后跳轉(zhuǎn)
this.scrollTop = this.$refs.table.bodyWrapper.scrollTop
this.$router.push('/detail')
},
}
}
</script>
可能與宏任務(wù)相關(guān)，但具體什么原因還請(qǐng)各位大佬留言解惑执泰。
