프로젝트에서 keep-alive
구성 요소를 캐시하는 데 사용하고 elementUI의 테이블 목록을 사용합니다.
- 이제 요구 사항은 세부 사항을 클릭한 후 목록으로 돌아가는 것이며,
滚动条
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>
매크로 작업과 관련이 있을 수 있지만 구체적인 이유를 설명하는 메시지를 남겨주세요.