Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失

news2025/2/23 21:25:36

tooltip包裹的标题,点击跳转后,提示框不消失iview  Tooltip

就会有这种显示问题

iview  Tooltip

下面这种错误方法不可行,解决办法往下翻

css写得没错,问题出在Javascript当中的 getElementsByClassName(“xxabc”),
这个方法得到的是一个由class="xxx"的所有元素组成的集合,而不是单个元素;
集合是没有display属性的,集合中的元素才有display属性。当你试图做 集合.style.display的时候,自然会报错。
所以你这个问题的解决方案应该是:遍历集合中所有的元素,然后给每个元素都加上display="none"的属性

iview  Tooltip
iview Tooltip

解决方法如下

view Tooltip

<p v-for="(value, key) in item.data" :key="key" class="itemTxt" @click="toClaimReceiptList(key)">
   <template v-if="key=='头程待合单数'">
     <Tooltip placement="right" transfer-class-name="xxabc">
       <span style="color: blueviolet;cursor: pointer;">
         *{{ key }}
       </span>
       <span class="itemNum">({{ value }})</span>
       <div slot="content">
         <div class="Errata">
           <p v-for="(item1, idx1) in platformCountObj" :key="idx1 + '_1'">
             {{ item1.platform }}:{{ item1.count }}
           </p>
         </div>
       </div>
     </Tooltip>
   </template>
   <template v-else>
     <span>{{ key }}</span>
     <span class="itemNum">({{ value }})</span>
   </template>
 </p>

js

var divset = document.getElementsByClassName('xxabc')
 for (var i = 0; i < divset.length; i++) {
   divset[i].style.display = 'none'
 };

全部代码

toClaimReceiptList(key) { // 跳转
      var status = -1
      var name = ''
      switch (key) {
        case '头程待确认数':
          name = 'doc-management'
          status = '4'
          break
        case '头程待合单数':
          name = 'doc-management'
          status = '3'
          break
      }
      if (name == 'doc-management') {
        console.log('头程待合单数', name, document.getElementsByClassName('xxabc'))
        var divset = document.getElementsByClassName('xxabc')
        for (var i = 0; i < divset.length; i++) {
          divset[i].style.display = 'none'
        };
      }
      this.$router.push({
        name: name,
        params: { status: status }
      })
    }

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

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

相关文章

Facebook社群对于个人和品牌的价值探讨

Facebook社群作为连接兴趣和人群的重要平台&#xff0c;不仅为个人提供了交流互动的空间&#xff0c;也成为品牌建立和发展的重要途径。本文将深入探讨Facebook社群在个人和品牌发展中的多重价值&#xff0c;以及如何有效利用这些社群来实现个人和品牌的目标。 1. 社群对个人的…

使用 docker buildx 构建跨平台镜像

buildx是Docker官方提供的一个构建工具&#xff0c;它可以帮助用户快速、高效地构建Docker镜像&#xff0c;并支持多种平台的构建。使用buildx&#xff0c;用户可以在单个命令中构建多种架构的镜像&#xff0c;例如x86和arm架构&#xff0c;而无需手工操作多个构建命令。此外bu…

Python从入门到放弃——整数类型变量

变量 前言 上一篇文章中我们学习了Print函数&#xff0c;并且深入的理解了Print函数的各个参数。明确了应该如何利用各种参数来实现我们想输出的效果。那么现在让我们来学习一下变量这一个知识点。 什么是变量 变量&#xff0c;作为编程中的核心概念之一&#xff0c;其重要性…

计算机的错误计算(二十二)

摘要 计算机的错误计算&#xff08;十九&#xff09;展示了计算机的一个错误计算&#xff1a;本应该为 0的算式的结果不为0. 那么&#xff0c;增加计算精度&#xff0c;能确定是0吗&#xff1f;不一定。 计算机的错误计算&#xff08;十九&#xff09;展示了计算机对 的错误计…

74. 搜索二维矩阵【二分法】【C++】

题目描述 搜索二维矩阵 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&…

海外金融机构银行保险证券数字化转型营销销售数字化成功案例讲师培训师讲授开户销售营销客户AI人工智能创新思维

金融机构需要数字营销的主要原因 数字银行、直接存款和移动网络的兴起让客户无需前往当地分行即可轻松办理银行业务。这些举措不仅提升了用户体验&#xff0c;也迫使银行向数字化世界迈进。 金融服务公司需要在数字营销渠道上保持稳固的地位&#xff0c;以免落后于大型机构。…

字符串相似度算法完全指南:编辑、令牌与序列三类算法的全面解析与深入分析

在自然语言处理领域&#xff0c;人们经常需要比较字符串&#xff0c;这些字符串可能是单词、句子、段落甚至是整个文档。如何快速判断两个单词或句子是否相似&#xff0c;或者相似度是好还是差。这类似于我们使用手机打错一个词&#xff0c;但手机会建议正确的词来修正它&#…

磁盘分区工具 -- 傲梅分区助手 v10.4.1 技术员版

软件简介 傲梅分区助手是一款功能强大的磁盘分区工具&#xff0c;它专为Windows系统设计&#xff0c;帮助用户更高效地管理他们的硬盘。该软件支持多种分区操作&#xff0c;包括创建、格式化、调整大小、移动、合并和分割分区。此外&#xff0c;它还提供了复制硬盘和分区的功能…

【手机取证】如何使用360加固助手给apk加固

文章关键词&#xff1a;手机取证、电子数据取证、数据恢复 一、前言 APP加固是对APP代码逻辑的一种保护。原理是将应用文件进行某种形式的转换&#xff0c;包括不限于隐藏&#xff0c;混淆&#xff0c;加密等操作&#xff0c;进一步保护软件的利益不受损坏&#xff0c;下面给…

TK养号工具开发会用上的源代码科普!

在当今数字化时代&#xff0c;社交媒体平台的崛起使得网络账号的维护与管理变得日益重要&#xff0c;其中&#xff0c;TK作为一款备受欢迎的社交媒体平台&#xff0c;吸引了大量用户。 在TK上进行账号养护&#xff0c;即通过各种方式提升账号权重、增加曝光量&#xff0c;已成…

光伏仿真系统不可忽视的功能:建模与仿真!

光伏仿真系统具备多种功能&#xff0c;能够支持对光伏发电系统进行深入研究和优化。为什么说建模与仿真功能是最不可忽视的呢&#xff1f;我们先来看看建模功能。 光伏仿真系统可以通过光伏插件或扩展程序&#xff0c;创建精确的光伏组件模型&#xff0c;包括光伏板、支架、逆变…

MyBatis入门程序详解

目录 一、MyBatis概述 二、编写MyBatis入门程序 三、配置SQL提示 四、传统jdbc的劣势 一、MyBatis概述 MyBatis是一个基于Java的持久层框架&#xff0c;它内部封装了JDBC操作&#xff0c;使得开发人员可以更专注于SQL语句本身而非繁琐的JDBC操作细节。在MyBatis中&#xff0…

软件测试面试1000问(含答案)

1、自动化代码中,用到了哪些设计模式? 单例设计模式工厂模式PO设计模式数据驱动模式面向接口编程设计模式 2、什么是断言( Assert) ? 断言Assert用于在代码中验证实际结果是不是符合预期结果&#xff0c;如果测试用例执行失败会抛出异常并提供断言日志 3、什么是web自动化…

AI工具集盘点!2024年必备的AI软件都在这,一文全部拿下!

AI工具哪款好&#xff0c;有哪些值得推荐&#xff1f; 不可否认&#xff0c;当下各式各样的AI工具层出不穷&#xff0c;面对不断涌现的AI工具&#xff0c;各位在选用时是否无从下手&#xff0c;或是抽不出时间&#xff0c;逐一体验对比不同AI工具的差异…… 这也是现如今许多…

基于单片机的防酒驾控制系统设计

摘 要&#xff1a; 酒后驾车的危害十分巨大&#xff0c;因此&#xff0c;笔者介绍了一种基于单片机的防酒驾控制系统。系统由酒精传感器 MQ-3测量汽车驾驶员体内的酒精含量浓度&#xff0c;通过 A/D 转换器转换成数字信号传给单片机&#xff0c;经过单片机处理后显示酒精浓度&a…

OpenEuler 22.03 LTS SP3 CVE-2024-6387 OpenSSH 漏洞修复指南

一、漏洞概括 漏洞名称OpenSSH Server远程代码执行漏洞漏洞编号CVE-2024-6387公开时间2024-7-1CVSS 3.1分数8.1威胁类型代码执行漏洞等级暂无技术细节状态已公开在野利用状态不明确PoC状态x86已公开EXP状态未公开 OpenSSH是SSH&#xff08;Secure Shell&#xff09;协议的开源…

通过shell脚本创建MySQl数据库

通过shell脚本创建数据库 #!/bin/bashserverIP10.1.1.196 SERVER_NAMEecho $serverIP | cut -d . -f4cat<<EOF>db.sql drop database if exists ${SERVER_NAME}_scheduler; drop database if exists ${SERVER_NAME}_kms; drop database if exists ${SERVER_NAME}_uim…

用NanoID换掉 UUID,好处是?【送源码】

当我们在分布式环境中存储一些数据的时候&#xff0c;不得不面对的一个选择&#xff0c;就是ID生成器。 使用一个唯一的字符串&#xff0c;来标识一条完整的记录。 这时候&#xff0c;不能使用md5或者sha1来对整个记录做摘要&#xff0c;因为我们后续还要改动这个记录。也不能…

科技云报道:人工智能“顶流”齐聚WAIC 2024,他们都做了什么?

科技云报道原创。 一个由智能驱动的未来世界长啥样&#xff1f; 从完成跨海跨城航线的“空中的士”、全无人驾驶汽车、实现奔跑功能的全尺寸通用人形机器人到百度文心一言、讯飞星火、阿里通义千问、华为盘古、商汤日日新等大模型&#xff0c;从智能制造引领的“灯塔工厂”到…

芯科普| 矽光子是什麼?可以用在哪些领域?点击查看!

随着生成式人工智能的崛起&#xff0c;数据传输需求亦呈现爆发式增长。而在此背景下&#xff0c;台积电在半导体展览上披露的硅光子&#xff08;SiPh&#xff1a;Silicon Photonics&#xff09;技术进展&#xff0c;更是将硅光子推向了风口浪尖&#xff0c;成为了市场的宠儿。 …