一.Tree 树形控件
<el-tree :data="data" :props="{ class: customNodeClass }" @node-click="handleNodeClick" />
const data: Tree[] = [
{
label: '标题一',
isPenultimate: true,
index:0
},
{
label: '标题二',
isPenultimate: true,
index:1
},
{
label: '标题三',
isPenultimate: true,
index:2
},
]
二、页面
<div class="sug_right">
<div class="r_content" :id="`content${index}`" v-for="(item, index) in rightData" :key="index">
<div class="title" >{{ item.title }}</div>
<div class="r_img"></div>
</div>
</div>
三、获取点击的标题函数
/**
* 获取点击的标题
* @param data
*/
const handleNodeClick = (data: Tree) => {
elePosition(`content${data.index}`)
}
四、设置滚动
/**
* 设置滚动
* @param offsetTop
*/
const scrollTo = (offsetTop:number)=>{
const parent = document.querySelector('.sug_right')
parent?.scrollTo({
top:offsetTop - 120,
behavior:'smooth'
})
}
五、设置滚动
/**
* 获取元素距离父元素位置
* @param id
*/
const elePosition = (id:string)=>{
const element = document.getElementById(id);
scrollTo(element!.offsetTop)
}