话不用多说,先上一个视频,看看是不是你们需要的效果
vue2双层循环生成动态ref,并跳转到组件内的指定位置
<div class="menu-content" ref="menu">
<el-collapse v-model="activeNames">
<el-collapse-item style="padding: 10px;" v-for="(item,index) in project.list" :title="item.name"
:name="item.id">
<div @click="goPageByType(leaf,item.id,leaf.id)" v-for="(leaf,index1) in item.leafList"
:class="['menu-item',leafId == leaf.id?'menu-item-active':'']" v-if="leaf.id!=-1"
:ref="`itemRef${item.id}-${leaf.id}`">
<div class="item-left">
<img :src="leaf.icon" />
</div>
<div class="item-right">
{{leaf.name}}
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
const menuHtmlRef = this.$refs.menu;
//遍历去判断,并定位到指定的ref的位置,
this.project.list.forEach((row, index) => {
row.leafList.forEach((item, index1) => {
const refName = `itemRef${row.id}-${item.id}`;
// 直接访问特定的ref
this.$nextTick(() => {
const elements = this.$refs[refName];
if (elements && elements.length > 0) {
const str = JSON.stringify(elements[0]._prevClass);
if (str.search("menu-item-active") != -
1) { //找到当前要定位的数据
const offsetTop = elements[0].offsetTop
menuHtmlRef.scrollTop = offsetTop;
}
}
});
});
});