当前位置: 首页 > news >正文

【解决】elementui ——tooltip提示在循环中点击一个,同时显示多个的问题!

同时显示多个tooltip——效果图:
在这里插入图片描述
点击第一个二维码把循环el-card中所有的tooltip都触发了

解决后效果图:
只显示点击的当前tooltip
在这里插入图片描述

解决办法:

通过循环item中定义字段,进行控制tooltip显示隐藏

代码:

页面代码:<el-card :body-style="{ padding: '0px' }"  v-for="item in List"><div style="display: inline-block;margin-right: 10px;"><el-tooltip v-model="item.qRCodeShow" :manual="true" placement="bottom" effect="light"><el-buttonclass="btnTextStyle"@click="qRCodeClick(item.id)"type="text"size="small">二维码</el-button><div slot="content"><p style=" margin: 0;font-size:16px;">防火门</p><p style="text-align: right;color:blue;cursor: pointer; margin: 5px 0;font-size:14px;" @click.stop>下载</p><img src="../../assets/images/loginBg.png" style="width: 200px;height: 150px;"/></div></el-tooltip></div></el-card>data数据:
data(){return{List:[{id:1,qRCodeShow:false,},{id:2,qRCodeShow:false,},{id:3,qRCodeShow:false,},{id:4,qRCodeShow:false,},],}
},方法:
qRCodeClick(id){this.List.map((item,index) =>{if(item.id == id){this.List[index].qRCodeShow = !this.List[index].qRCodeShow;}})this.$forceUpdate()},

相关文章:

【解决】elementui ——tooltip提示在循环中点击一个,同时显示多个的问题!

同时显示多个tooltip——效果图&#xff1a; 点击第一个二维码把循环el-card中所有的tooltip都触发了 解决后效果图&#xff1a; 只显示点击的当前tooltip 解决办法&#xff1a; 通过循环item中定义字段&#xff0c;进行控制tooltip显示隐藏 代码&#xff1a; 页面代码&am…...

SpringBoot-核心技术篇

技术掌握导图 六个大标题↓ 配置文件web开发数据访问单元测试指标指控原理解析 配置文件 1.文件类型 1.1、properties 同以前的properties用法 1.2、yaml 1.2.1、简介 YAML是 “YAML Aint Markup Language”&#xff08;YAML不是一种标记语言&#xff09;的递归缩写。在…...

2023还有人不知道kubernetes?| 初步理解kubernetes

文章目录Kubernetes(K8s)一、Openstack&VM1、**认识虚拟化****1.1**、什么是虚拟化**1.2、虚拟化分类**2、OpenStack与KVM、VMWare2.1、OpenStack2.2、KVM2.3、VMWare二、容器&编排技术1、容器发展史1.1、Chroot1.2、FreeBSD Jails1.3、Solaris Zones1.4、LXC1.5、Dock…...

Docker 环境搭建

RabbitMq 安装与启动安装&#xff1a;运行命令&#xff1a;docker pull rabbitmq 默认版本是&#xff1a;latest启动rabbitmq&#xff1a;运行命令&#xff1a;docker run \ # 运行-e RABBITMQ_DETAULT_USERroot \ # 设置用户名-e RABBITMQ_DETAULT_PASS123456 \ # 设置 密码--…...

css实现炫酷充电动画

先绘制一个电池&#xff0c;电池头部和电池的身体 这里其实就是两个div&#xff0c;使用z-index改变层级&#xff0c;电池的身体盖住头部&#xff0c;圆角使用border-radius完成 html部分,完整的css部分在最后 <div class"chargerBox"><div class"ch…...

【Effective C++详细总结】第二章 构造/析构/赋值运算

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;C/C知识点 &#x1f4e3;专栏定位&#xff1a;整理一下 C 相关的知识点&#xff0c;供大家学习参考~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;…...

webpack基础

webpack基础 webpack基础目录webpack基础前言Webpack 是什么&#xff1f;Webpack 有什么用&#xff1f;一、webpack的基本使用webpack如何使用文件和文件夹创建创建文件下载依赖二、基本配置5 大核心概念准备 Webpack 配置文件修改配置文件处理样式资源处理图片资源修改输出资源…...

jQuery《一篇搞定》

今日内容 一、JQuery 零、 复习昨日 1 写出至少15个标签 2 写出至少7个css属性font-size,color,font-familytext-algin,background-color,background-image,background-sizewidth,heighttop,bottom ,left ,rightpositionfloatbordermarginpadding 3 写出input标签的type的不…...

Spring Cloud学习笔记【负载均衡-Ribbon】

文章目录什么是Spring Cloud RibbonLB&#xff08;负载均衡&#xff09;是什么Ribbon本地负载均衡客户端 VS Nginx服务端负载均衡区别&#xff1f;Ribbon架构工作流程Ribbon Demo搭建IRule规则Ribbon负载均衡轮询算法的原理配置自定义IRule新建MyRuleConfig配置类启动类添加Rib…...

第九章:C语言数据结构与算法初阶之堆

系列文章目录 文章目录系列文章目录前言一、堆的定义二、堆的实现三、堆的接口函数1、初始化2、销毁3、插入4、删除5、判空6、元素个数四、堆排序1、建堆2、排序五、堆的应用——TOPK1、什么是TOPK问题&#xff1f;2、解决方法总结前言 堆就是完全二叉树。 一、堆的定义 我们…...

Mysql架构初识

&#x1f972; &#x1f978; &#x1f90c; &#x1fac0; &#x1fac1; &#x1f977; &#x1f43b;‍❄️&#x1f9a4; &#x1fab6; &#x1f9ad; &#x1fab2; &#x1fab3; &#x1fab0; &#x1fab1; &#x1fab4; &#x1fad0; &#x1fad2; &#x1fad1;…...

字符串函数和内存函数

&#x1f355;博客主页&#xff1a;️自信不孤单 &#x1f36c;文章专栏&#xff1a;C语言 &#x1f35a;代码仓库&#xff1a;破浪晓梦 &#x1f36d;欢迎关注&#xff1a;欢迎大家点赞收藏关注 字符串函数和内存函数 文章目录字符串函数和内存函数前言1. 字符串函数介绍1.1 s…...

Web3中文|GPT-4超越GPT-3.5的五大看点

A Beautiful CinderellaDwelling EagerlyFinally Gains HappinessInspiring Jealous KinLove Magically Nurtures Opulent PrinceQuietly RescuesSlipper TriumphsUniting Very WondrouslyXenial Youth Zealously这是一段描述童话故事《灰姑娘》的内容&#xff0c;它出自GPT-4之…...

动态矢量瓦片缓存库方案

目录 前言 二、实现步骤 1.将数据写入postgis数据库 2.将矢量瓦片数据写入缓存库 3.瓦片接口实现 4.瓦片局部更新接口实现 总结 前言 矢量瓦片作为webgis目前最优秀的数据格式&#xff0c;其主要特点就是解决了大批量数据在前端渲染时出现加载缓慢、卡顿的问题&#xff0…...

628.三个数的最大乘积

给你一个整型数组 nums &#xff0c;在数组中找出由三个数组成的最大乘积&#xff0c;并输出这个乘积。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;6 示例 2&#xff1a; 输入&#xff1a;nums [1,2,3,4] 输出&#xff1a;24 示例 3&#xff1a; …...

【数据结构】堆和集合笔记

自己写一个堆首先&#xff0c;明确一下&#xff0c;为什么需要堆&#xff1f;>考虑插入&#xff0c;删除&#xff0c;查找的效率。数组&#xff0c;查找&#xff0c;最快是二分查找O(lgN)。但查找完如果要做什么操作&#xff0c;比如删除&#xff0c;就要挪动元素了。所以合…...

java LinkedList 源码分析(通俗易懂)

目录 一、前言 二、LinkedList类简介 三、LinkedList类的底层实现 四、LinkedList类的源码解读 1.add方法解读 : 〇准备工作 。 ①跳入无参构造。 ②跳入add方法。 ③跳入linkList方法。 ④增加第一个元素成功。 ⑤向链表中添加第二个元素。 2.remove方法解读 : 〇准备工…...

Vue中实现路由跳转的三种方式详细分解

vue中实现路由跳转的三种方式 目录 vue中实现路由跳转的三种方式 一、使用vue-router 1.下载vue-router模块到当前工程 2.在main.js中引入VueRouter函数 3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件 4.创建路由规则数组 – 路径和组件名对应关系 5…...

全国自学考试03708《中国近现代史纲要》重点复习精要

1. 西方列强的殖民扩张和鸦片战争的影响。&#xff08;两面性&#xff09; &#xff1a;反面—破坏了了中国的小农经济&#xff0c;是中国由封建社会转变为两半社会。 --一系列不公平条约&#xff0c;破坏了中国主权领土完整。 --压迫中国人民&#xff0c;给中国人民带来了巨大…...

数据库面试题——锁

了解数据库的锁吗&#xff1f; 锁是数据库系统区别于文件系统的一个关键特性&#xff0c;锁机制用于管理对共享资源的并发访问。 InnoDB下两种标准行级锁&#xff1a; 共享锁&#xff08;S Lock&#xff09;&#xff0c;允许事务读一行数据。 排他锁&#xff08;X Lock&…...

XYBot V2:基于Python的插件化微信机器人框架开发与部署指南

1. 项目概述&#xff1a;一个功能丰富的微信机器人框架最近在折腾一个挺有意思的开源项目&#xff0c;叫XYBot V2。简单来说&#xff0c;它是一个基于Python的微信机器人框架&#xff0c;能让你在微信里实现各种自动化交互和趣味功能。项目作者HenryXiaoYang已经声明因个人原因…...

如何用SketchUp STL插件轻松实现3D打印:从设计到实物的完整指南

如何用SketchUp STL插件轻松实现3D打印&#xff1a;从设计到实物的完整指南 【免费下载链接】sketchup-stl A SketchUp Ruby Extension that adds STL (STereoLithography) file format import and export. 项目地址: https://gitcode.com/gh_mirrors/sk/sketchup-stl 你…...

ECharts地图渲染报错‘跨域’?别慌,一个本地静态服务器(anywhere)就能搞定

ECharts地图渲染报错‘跨域’&#xff1f;本地静态服务器解决方案全解析 当你兴奋地准备好本地GeoJSON数据文件&#xff0c;准备在ECharts中实现炫酷的地图可视化效果时&#xff0c;突然遭遇浏览器控制台抛出的"CORS policy"跨域错误&#xff0c;这感觉就像即将到达…...

LinkSwift:九大网盘直链解析工具使用指南

LinkSwift&#xff1a;九大网盘直链解析工具使用指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 / 迅雷云…...

酷安UWP桌面版:在Windows上体验酷安社区的最佳指南

酷安UWP桌面版&#xff1a;在Windows上体验酷安社区的最佳指南 【免费下载链接】Coolapk-UWP 一个基于 UWP 平台的第三方酷安客户端 项目地址: https://gitcode.com/gh_mirrors/co/Coolapk-UWP 还在为手机屏幕太小而烦恼吗&#xff1f;想要在大屏幕上舒适浏览酷安社区内…...

SITS 2026正式版将于2024Q3封版,这7类测试团队必须在GA前掌握的AI原生适配策略(限内部技术预览通道)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生测试方法革新&#xff1a;SITS 2026自动化测试新思路 SITS 2026&#xff08;Semantic Intelligence Testing Suite&#xff09;标志着测试范式从脚本驱动向语义感知与上下文自适应的跃迁。它不再…...

FreeRouting终极指南:如何快速掌握开源PCB自动布线工具

FreeRouting终极指南&#xff1a;如何快速掌握开源PCB自动布线工具 【免费下载链接】freerouting Advanced PCB auto-router 项目地址: https://gitcode.com/gh_mirrors/fr/freerouting FreeRouting是一款功能强大的开源PCB自动布线工具&#xff0c;能够帮助你高效完成复…...

从HarryNull密码游戏入门CTF:手把手带你破解前10关(附完整思路与工具)

从HarryNull密码游戏入门CTF&#xff1a;手把手带你破解前10关&#xff08;附完整思路与工具&#xff09; 当你第一次接触CTF&#xff08;Capture The Flag&#xff09;时&#xff0c;可能会被各种专业术语和复杂的技术吓到。但学习安全技术最好的方式&#xff0c;就是从实践中…...

AI研发知识熵增定律破解实录:基于SITS2026的动态本体建模,实现需求→代码→实验→推理的闭环可溯

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI研发知识熵增定律破解实录&#xff1a;基于SITS2026的动态本体建模&#xff0c;实现需求→代码→实验→推理的闭环可溯 在AI系统工程实践中&#xff0c;“知识熵增”表现为需求模糊性、代码上下文漂移…...

企业终端安全:OpenClaw AI代理的检测、卸载与验证方案

1. 项目概述&#xff1a;OpenClaw 终端清理工具 在企业的终端管理实践中&#xff0c;我们经常会遇到一个棘手的问题&#xff1a;一些未经审批的软件&#xff0c;通过非官方渠道&#xff08;比如员工自行下载、第三方脚本自动安装&#xff09;悄悄部署在了员工的电脑上。这些软…...