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

news2024/10/7 8:30:46

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

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

									}

								});
							});
						});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1836393.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java每日作业day6.18

ok了家人们今天我们继续学习方法的更多使用&#xff0c;闲话少叙&#xff0c;我们来看今天学了什么 1.重载 在同一个类中&#xff0c;可不可以存在同名的方法&#xff1f;重载:在同一个类中&#xff0c;定义了多个同名的方法&#xff0c;但每个方法具有不同的参数类型或参数个…

传统车牌识别

主要参考&#xff1a;https://blog.csdn.net/qq_40784418/article/details/105586644 其它介绍&#xff1a; https://blog.csdn.net/great_yzl/article/details/120127962 https://blog.csdn.net/onepunch_k/article/details/115480904 cv2.matchTemplate https://docs.ope…

三星SAINT-D技术引领HBM内存堆叠革命

三星电子即将在今年推出一项革命性技术&#xff0c;允许在CPU或GPU上堆叠高带宽内存&#xff08;HBM&#xff09;&#xff0c;根据韩国经济日报的报道&#xff0c;这一消息在圣何塞举办的三星晶圆代工论坛2024上公布&#xff0c;并得到业内消息人士证实。这项3D封装技术为2025年…

ESP32蓝牙BLE连接米家温湿度计

ESP32蓝牙BLE连接米家温湿度计 文章目录 ESP32蓝牙BLE连接米家温湿度计简介需要准备的东西软件调试代码实现修改查找的名称 修改需要连接的服务和属性添加解析数据的代码 上电演示提示 简介 最近在学习低功耗蓝牙BLE(Bluetooth Low Energy)&#xff0c;刚好手里有个米家蓝牙温…

总结一下 C# 如何自定义特性 Attribute 并进行应用

前言 Attribute&#xff08;特性&#xff09;是一种用于为程序元素&#xff08;如类、方法、属性等&#xff09;提供元数据信息的方法。 特性是一种声明式的信息&#xff0c;附加到程序元素上&#xff0c;提供额外的数据用于描述和控制这些元素的行为。 在编译和运行时&…

WMS系统调拨盘点功能:优化仓储管理效率

一、调拨功能概述 WMS系统的调拨功能是指仓库内部或者不同仓库之间对商品进行转移的过程。调拨的目的在于平衡库存、优化存储空间和提高物流效率。调拨功能主要包括以下几个方面&#xff1a; 1. 调拨申请&#xff1a;根据业务需求&#xff0c;仓库管理员可以发起调拨申请&…

软件设计不是CRUD(23):在流式数据处理系统中进行业务抽象落地——详细编码

&#xff08;接上文《软件设计不是CRUD&#xff08;22&#xff09;&#xff1a;在流式数据处理系统中进行业务抽象落地——设计思考》&#xff09; 4、详细设计 项目开发初期&#xff0c;有两种测速雷达和对应的摄像头需要接入&#xff0c;分别是STC500型测速雷达和TTS400型测…

《UNIX环境高级编程》第三版(电子工业出版社出品)——两年磨一剑的匠心译作

历时两年&#xff0c;《UNIX环境高级编程》的翻译工作终于落下帷幕。这一路走来&#xff0c;真可谓是如鱼饮水&#xff0c;冷暖自知。还记得最初看到招募译者消息的那一刻&#xff0c;内心的激动难以言表。我毫不犹豫地报名&#xff0c;而后经历了试译、海选等激烈的角逐&#…

TestProject Python SDK入门

2024软件测试面试刷题&#xff0c;这个小程序&#xff08;永久刷题&#xff09;&#xff0c;靠它快速找到工作了&#xff01;&#xff08;刷题APP的天花板&#xff09;-CSDN博客跳槽涨薪的朋友们有福了&#xff0c;今天给大家推荐一个软件测试面试的刷题小程序。​编辑https://…

怎么提取视频中的音频?别错过这6个音频提取方法了!(全新)

您是否曾经发现过一个音乐很棒的视频&#xff0c;并想从视频中提取音频&#xff1f;如今&#xff0c;关于提取mp4视频中的音频需求越来越常见。例如&#xff0c;您可能想从mp4格式的电影中提取音频&#xff0c;将音乐用作手机铃声&#xff0c;或在自己的视频项目中使用视频中的…

C#唯一进程的处理Winform/WPF

C#唯一进程的处理 1.使用进程&#xff08;Process&#xff09;判断winformWPF执行效果&#xff1a; 2.使用互斥体&#xff08;Metux&#xff09;实现winformWPF实现效果&#xff1a; 在C#客户端&#xff08;Winform/WPF&#xff09;开发过程中&#xff0c;有的情况需要确保程序…

零基础入门学用Arduino 第四部分(一)

重要的内容写在前面&#xff1a; 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后&#xff0c;整体感觉是很好的&#xff0c;如果有条件的可以先学习一些相关课程&#xff0c;学起来会更加轻松&#xff0c;相关课程有数字电路…

Microsoft Visual C++ Redistributable 【安装包】【高速下载】

方法1、可以从官方下载&#xff0c;如下图 方法2 已经下载好并且已经整理好了2008--2022的所有版本点击下方链接即可高速下载 如果是win7-win8-win10-win11直接可以下载2015--2022版本&#xff0c;xp需要下载2015之前的 点击链接Microsoft Visual C Redistributable官方版本…

茶艺师服务师傅小程序APP源码(APP+小程序+公众号+H5)

&#x1f375;茶艺师服务小程序&#xff1a;品味生活的茶艺新体验&#x1f331; &#x1f33f;一、引言&#xff1a;茶艺师服务小程序&#xff0c;让生活更有味 在繁忙的生活中&#xff0c;品一杯香茗&#xff0c;感受茶文化的韵味&#xff0c;是许多人向往的休闲方式。然而&…

Android开发系列(四)Jetpack Compose之Button

在Jetpack Compose中&#xff0c;Button是一个常用的用户界面组件&#xff0c;用于执行某些操作或触发某些事件。Button控件是可触摸的&#xff0c;并且通常会显示一个文本或图标来表示其功能。 要在Jetpack Compose中创建一个Button&#xff0c;可以使用Button()函数&#xf…

C#——正则表达式详情

正则表达式 正则表达式: 列如判断一个字符串是不是手机号&#xff0c;或者密码是否包含大小写数字等这些要求&#xff0c;可以把这些条件写成一个表达式 创建正则表达式 string s1 "1234adsab1KHGFJD"; // 创建正则时需要在字符串前面加上 Regex r new Regex(&q…

序列化与反序列化漏洞实例

实验环境&#xff1a; 本次的序列化与反序列化漏洞为2021年强网杯上的一道比赛题目&#xff0c;我使用phpstudy集成环境将其测试环境搭建在了本地&#xff0c;如下。涉及的几个页面php为&#xff1a; index.php function.php myclass.php index.php : <?php // inde…

【Redis】java客户端(SpringData和jedis)

https://www.oz6.cn/articles/58 https://www.bilibili.com/video/BV1cr4y1671t/?p16 redis官网客户端介绍&#xff1a;https://redis.io/docs/latest/develop/connect/clients/ jedis maven引入依赖 <dependencies><!--引入Jedis依赖--><dependency><…

统计学一(术语,正态)

目录 一&#xff0c;常用术语 二&#xff0c;正态分布&#xff08;Normal Distribution&#xff09; 三&#xff0c;中心极限定理(Central Limit Theorem) 一&#xff0c;常用术语 population(族群)&#xff1a;要统计的总的 populationSize(族群数量)&#xff1a;要统计的总…

CSS【实战】抽屉动画

效果预览 技术要点 实现思路 元素固定布局&#xff08;fixed&#xff09;在窗口最右侧外部js 定时器改变元素的 right 属性&#xff0c;控制元素移入&#xff0c;移出 过渡动画 transition transition: 过渡的属性 过渡的持续时间 过渡时间函数 延迟时间此处改变的是 right …