vue2双层循环生成动态ref,并跳转到组件内的指定位置

话不用多说,先上一个视频,看看是不是你们需要的效果

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;
											
										}

									}

								});
							});
						});