当前位置: 首页 > 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()},
http://www.lryc.cn/news/40141.html

相关文章:

  • SpringBoot-核心技术篇
  • 2023还有人不知道kubernetes?| 初步理解kubernetes
  • Docker 环境搭建
  • css实现炫酷充电动画
  • 【Effective C++详细总结】第二章 构造/析构/赋值运算
  • webpack基础
  • jQuery《一篇搞定》
  • Spring Cloud学习笔记【负载均衡-Ribbon】
  • 第九章:C语言数据结构与算法初阶之堆
  • Mysql架构初识
  • 字符串函数和内存函数
  • Web3中文|GPT-4超越GPT-3.5的五大看点
  • 动态矢量瓦片缓存库方案
  • 628.三个数的最大乘积
  • 【数据结构】堆和集合笔记
  • java LinkedList 源码分析(通俗易懂)
  • Vue中实现路由跳转的三种方式详细分解
  • 全国自学考试03708《中国近现代史纲要》重点复习精要
  • 数据库面试题——锁
  • Python笔记 -- 文件和异常
  • 蓝桥杯刷题冲刺 | 倒计时24天
  • 真正理解微软Windows程序运行机制——什么是消息
  • HTTP 缓存的工作原理
  • RK3568在Android上进行驱动模块开发(源码外)
  • 操作技巧 | 在Revit中借用CAD填充图案的方法
  • Java的二叉树、红黑树、B+树
  • 昨天某读者拿到华为OD岗位offer,今天来分享一下经验,包含华为OD机试
  • 树的遍历方式(前中后,层序遍历,递归,迭代,Morris遍历)-----直接查询代码
  • Docker Registry部署镜像私有仓库及鉴权认证
  • stm32外设-中断详解