左侧树结构,右侧树结构详情内容。点击左侧菜单,右侧内容滚动到菜单对应的内容。直接上代码。
<!-- 左侧 -->
<el-tree
:data="collpaseData"
node-key="bussId"
@node-click="nodeClick"
:props="defaultProps"
default-expand-all
ref="contentTreeRef"
>
<template #default="{ node }">
<span>{{ node.label }}</span>
</template>
</el-tree>
<!-- 右侧 -->
<div class="list-content">
<div
v-for="(item,index) in listData"
:key="index"
:id="`treeScroll_${item.bussId}`"
>
</div>
</div>
<script>
function nodeClick(e:any){
let element :any = document.getElementById(`treeScroll_${e.bussId}`)
$('.list-content').animate({ scrollTop: (element.offsetTop - 80) + 'px' }, 500);
}
</script>
<style>
.list-content{
height: 100%;
overflow: auto;
width:100%;
background: #fff;
}
</style>