页面中包含多个el-popover,点击其中一个显示,其他的关闭(多个el-popover,click触发,点击都不消失的问题)

问题背景:需求是el-tree中的每个树节点后都有一个按钮,点击触发el-popover的显示,但是由click触发的el-popover,在点击下一个节点时,之前的都不消失。

解决办法:注:最主要的就是:ref="`data-type-${data.id}`"这句

             <el-popover:ref="`data-type-${data.id}`"popper-class="common-popover"placement="right"trigger="click":tabindex="data.id"><divslot="reference"class="data-type-text"type="text"size="mini":title="data.data_type":class="[data.data_type + '-text']"@click="handleOpenDataOptions(`data-type-${data.id}`)"><span>{{ data.data_type }}</span></div></el-popover>
// 点击popover所在按钮触发的事件,保证同一时间只有一个popover显示handleOpenDataOptions(ref) {Object.keys(this.$refs).forEach((key) => {if (key != ref &&key.includes("data-type-") &&this.$refs[key].showPopper) {// 检测到有其他popover显示时,将其他popover关闭this.$nextTick(() => {this.$refs[key].doClose();});}});},

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git_IDEA集成Git

Git_IDEA集成Git 配置 Git 忽略文件 创建忽略规则文件 引用忽略配置文件 定位 Git 程序 初始化本地库 添加到暂存区 提交到本地库 切换版本 创建分支 切换分支 合并分支 解决冲突 配置 Git 忽略文件 创建忽略规则文件 引用忽略配置文件 在 .gitconfig 文件中进行&…

房屋租赁网站毕业设计基于SpringBootSSM框架的计算机毕业设计

计算机毕业设计/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序 目录 一、项目背景与目的‌ ‌二、系统需求分析‌ 2.1功能需求 2.2 技术需求 2.3 可执行性 ‌三、系统设计与实现‌ ‌3.1系统架构设计‌&#xff1a; ‌3.2功能模块开发‌&#xff1a; ‌3.3…

AWD的复现

学习awd的相关资料&#xff1a;速成AWD并获奖的学习方法和思考记录- Track 知识社区 - 掌控安全在线教育 - Powered by 掌控者&#xff08;包含使用脚本去批量修改密码&#xff09; 在复现之前去了解了以下AWD的相关脚本 资料&#xff1a;AWD批量攻击脚本使用教程-CSDN博客 …

全新子比主题7.9.2开心版 子比主题最新版源码

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 wordpress zibll子比主题7.9.2开心版 修复评论弹授权 可做付费下载站 含wordpress搭建视频教程zibll子比主题安装视频教程支付配置视频教程&#xff0c;视频都是语音讲解&#xff0c;…

Go:error处理机制和函数

文章目录 error处理机制函数函数作为参数匿名函数匿名函数和闭包闭包运用闭包与工厂模式使用闭包调试 error处理机制 本篇总结的是Go中对于错误的处理机制 Go 语言的函数经常使用两个返回值来表示执行是否成功&#xff1a;返回某个值以及 true 表示成功&#xff1b;返回零值&…

2024软件测试面试秘籍(含答案+文档)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Part1 1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师…

超简洁的B端系统,还是看国外的设计.

国外的一些 B 端系统设计往往注重简洁性和实用性的完美结合。 从界面布局来看&#xff0c;它们通常采用简洁明快的线条和清晰的模块划分&#xff0c;避免了过多的装饰和繁杂的元素&#xff0c;使得用户能够快速聚焦于核心功能。 色彩方面&#xff0c;多选用中性色调或淡雅的色…

自由学习记录(13)

服务端常见的“资源” 在服务端&#xff0c;常见的“资源”指的是服务端提供给客户端访问、使用、处理或操作的各种数据和功能。根据不同类型的服务和应用场景&#xff0c;服务端的资源种类可以非常广泛。以下是一些常见的服务端资源类型&#xff1a; 1. 文件和静态资源 网页…

设计模式04-创建型模式1(简单工厂/工厂模式/抽象工厂/Java)

3.1 简单工厂模式 3.1.1 创建型模式 创建型设计模式将对象的创建过程和对象的使用过程分离&#xff0c;用户使用对象时无需关注对象的创建细节&#xff0c;外界对于这些对象只需要知道它们共同的接口&#xff0c;而不用清楚其实现细节&#xff0c;使得整个系统的设计更加符合…

console.log(“res.data = “ + JSON.stringify(res.data));

res.data[object Object] 说明你在控制台打印 res.data 时&#xff0c;它是一个 JavaScript 对象&#xff0c;而不是字符串。这种情况下&#xff0c;console.log 输出的 [object Object] 表示它无法直接显示对象的内容。 要查看 res.data 的实际内容&#xff0c;你需要将其转换…

​​Spring6梳理17——基于XML的自动装配

以上笔记来源&#xff1a; 尚硅谷Spring零基础入门到进阶&#xff0c;一套搞定spring6全套视频教程&#xff08;源码级讲解&#xff09;https://www.bilibili.com/video/BV1kR4y1b7Qc 目录 ①引入 ②场景模拟 2.1 创建UserController类文件 2.2 创建UserService接口文件 2…

关于jmeter中没有jp@gc - response times over time

1、问题如下&#xff1a; jmeter没有我们要使用的插件 2、解决方法&#xff1a; 选择下面文件&#xff0c;点击应用&#xff1b; 3、问题解决 ps&#xff1a;谢谢观看&#xff01;&#xff01;&#xff01;

Java面向对象(三)(抽象和封装)(自己学习整理的资料)

一.类的提炼过程 从现实生活中归纳总结出&#xff0c;多种相同物种&#xff0c;具有的相同的特性&#xff08;属性&#xff0b;行为&#xff09;提炼到一个容器里&#xff0c;给这个容器起一个名字&#xff0c;名字就是类。 步骤&#xff1a; 发现类&#xff08;Dog&#xff…

亿佰特STM32MP13工业核心板【学习】

资料链接&#xff1a;ebyte.com/serchlist.aspx?keyECK10 加屏蔽罩的方法确实可以防EMC干扰防水防潮&#xff1a; 宽度: 16 位宽表示数据总线的宽度&#xff0c;意味着每次可以传输 16 位的数据。这在某些应用中可以提高内存带宽。电压: DDR3L SDRAM 的工作电压通常为 1.35V&…

32 类和对象 · 中

目录 一、类的默认成员函数 二、构造函数 &#xff08;一&#xff09;构造函数的特点 &#xff08;二&#xff09;使用例 1、Date类 2、Stack类 &#xff08;三&#xff09;总结 三、析构函数 &#xff08;一&#xff09;析构函数的特点 &#xff08;二&#xff09;使…

scrapy的xpath在控制台可以匹配,但是到了代码无法匹配(无法匹配tbody标签)

问题 使用xpath-helper可以匹配到,然后scrapy却无法 然后写入html来看看 发现根本就没有tbody,太可恶了 解决 方法1 不使用tbody就可以 方法2 使用或运算符 | big_list response.xpath("//div[classChannelClasssNavContent]/table/tbody/tr[1]/td/table/tbody/t…

Android OpenGL天空盒

在我们的项目学习过程中&#xff0c;我们从一片漆黑的虚空开始构建。为了给这个世界增添一些色彩&#xff0c;我们加入了三个粒子喷泉&#xff0c;但即便如此&#xff0c;我们的世界依然大部分被黑暗和虚无所笼罩。这些喷泉仿佛悬浮在无尽的黑暗之中&#xff0c;没有边界&#…

玫瑰花HTML源码

HTML源码 <pre id"tiresult" style"font-size: 9px; background-color: #000000; font-weight: bold; padding: 4px 5px; --fs: 9px;"><b style"color:#000000">0010000100000111101110110111100010000100000100001010111111100110…

unity学习-全局光照(GI)

在全局光照&#xff08;Lighting&#xff09;界面有两个选项 Realtime Light&#xff08;实时光照&#xff09;&#xff1a;在项目中会提前计算好光照以及阴影的程序&#xff0c;当你需要调用实时全局光照的时候会将程序调用出来使用 Mixed Light&#xff08;烘焙光照&#x…

Nova-Admin:基于Vue3、Vite、TypeScript和NaiveUI的开源简洁灵活管理模板

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和工作学习方法 Nova Admin是一个基于Vue3、Vite、TypeScript和NaiveUI的简洁灵活的管理模板。这个项目旨在为开发者提供一个现代化、易于定制的后台管理界面解决方案。无…