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

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.mfbz.cn/a/776116.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python | Leetcode Python题解之第213题打家劫舍II

题目&#xff1a; 题解&#xff1a; class Solution:def rob(self, nums: List[int]) -> int:def robRange(start: int, end: int) -> int:first nums[start]second max(nums[start], nums[start 1])for i in range(start 2, end 1):first, second second, max(fi…

PHP基础教程——总结W3school

1、<?php ?> 2、$ 声明变量 3、变量大小写敏感 关键字&#xff08;if、else、echo&#xff09;和用户定义的类、函数大小写不敏感 4、三种注释 // # /* */ 5、echo "<br>"; 换行 6、global(关键字) 函数内访问全局变量 $GLOBALS[index] …

7寸微型FPV无人机技术详解

对于7寸微型FPV&#xff08;First Person View&#xff0c;第一人称视角&#xff09;无人机技术的详解&#xff0c;可以从以下几个方面进行介绍&#xff1a; 一、定义与基本概念 FPV无人机&#xff0c;全称为“第一人称视角无人机”&#xff0c;它利用安装在无人机上的摄像头…

[单master节点k8s部署]19.监控系统构建(四)kube-state-metrics

kube-state-metrics 是一个Kubernetes的附加组件&#xff0c;它通过监听 Kubernetes API 服务器来收集和生成关于 Kubernetes 对象&#xff08;如部署、节点和Pod等&#xff09;的状态的指标。这些指标可供 Prometheus 进行抓取和存储&#xff0c;从而使你能够监控和分析Kubern…

科研绘图系列:R语言STAMP图(STAMP Plot)

介绍 STAMP图(STAMP plot)并非一个广泛认知的、具有特定名称的图表类型,而是可能指在STAMP(Statistical Analysis of Metagenomic Profiles:“STAMP: statistical analysis of taxonomic and functional profiles”)软件使用过程中生成的各种统计和可视化图表的总称。ST…

使用OpenCV对图像进行三角形检测、颜色识别与距离估算【附代码】

文章目录 前言功能概述必要环境一、代码结构1. 参数定义2. 距离估计3. 颜色转换4. 图像处理函数4.1 读取图像和预处理4.2 轮廓检测4.3 过滤面积并检测三角形4.4 提取边框并计算距离 二、效果展示红色三角形绿色三角形蓝色三角形黄色三角形 三、完整代码获取总结 前言 本文将介…

通过 Parallels Desktop 虚拟机安装运行 macOS 15 Sequoia

在 Apple 的 WWDC 24 大会上&#xff0c;macOS Sequoia 15 成为全场热议的焦点。 作为科技爱好者和开发者&#xff0c;我们都迫不及待想要体验这些最新功能。但如果直接把整个 Mac 升级到测试版&#xff0c;可能不太现实&#xff0c;特别是当你需要保持主系统稳定的时候。 幸…

Alpha2:使用深度强化学习挖掘公式化的超额收益因子(附论文及源代码)

原创文章第577篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 今天说说因子挖掘&#xff0c;我们之前交付的Deap遗传算法因子挖掘&#xff0c;大家可以前往温习一下&#xff1a; 源码发布Quantlab4.2&#xff0c;Deap因子挖掘|gplearn做不到的…

小程序分包加载、独立分包、分包预加载等

一、小程序分包加载 小程序的代码通常是由许多页面、组件以及资源等组成&#xff0c;随着小程序功能的增加&#xff0c;代码量也会逐渐增加&#xff0c; 体积过大就会导致用户打开速度变慢&#xff0c;影响用户的使用体验。分包加载是一种小程序优化技术。将小程序不同功能的代…

springboot基础入门2(profile应用)

Profile应用 一、何为Profile二、profile配置方式1.多profile文件方式2.yml多文档方式 三、加载顺序1. file:./config/: 当前项目下的/config目录下2. file:./ &#xff1a;当前项目的根目录3. classpath:/config/:classpath的/config目录4. classpath:/ : classpath的根目录 四…

LabVIEW环境下OCR文字识别的实现策略与挑战解析

引言 在自动化测试领域&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术扮演着重要角色&#xff0c;它能够将图像中的文字转换成机器可编辑的格式。对于使用LabVIEW约5个月&#xff0c;主要进行仪器控制与数据采集的你而言…

什么是T0策略?有没有可以持仓自动做T的策略软件?

​​行情低迷&#xff0c;持仓被套&#xff0c;不想被动等待&#xff1f;长期持股&#xff0c;想要增厚持仓收益&#xff1f;有没有可以自动做T的工具或者策略&#xff1f;日内T0交易&#xff0c;做到降低持仓成本&#xff0c;优化收益预期。 什么是T0策略&#xff1f; 可以提…

知识图谱和 LLM:多跳问答

检索增强生成&#xff08;RAG&#xff09;应用程序通过将外部来源的数据集成到 LLM 中&#xff0c;擅长回答简单的问题。但他们很难回答涉及将相关信息之间的点连接起来的多部分问题。这是因为 RAG 应用程序需要一个数据库&#xff0c;该数据库旨在存储数据&#xff0c;以便轻松…

c++ 里如何检测内存泄露:比如用了 new ,但没有用 delete

&#xff08;1 方法一&#xff09; 用 MFC 框架的 F5 不带断点的调试。可以在输出窗口提示是否有内存泄露。 &#xff08;2 方法二&#xff09; &#xff0c;在 main 函数中添加如下代码&#xff0c;用 F5 不带断点的调试&#xff1a; int main() {_CrtSetDbgFlag( _CRTDBG_A…

JAVA 集合+对象复制工具类

JAVA 集合对象复制工具类 import jakarta.annotation.Nullable;import java.util.ArrayList; import java.util.List; import java.util.function.BiFunction; import java.util.function.Consumer;public class BeanUtil extends cn.hutool.core.bean.BeanUtil {/*** 数据拷贝…

Linux高并发服务器开发(十三)Web服务器开发

文章目录 1 使用的知识点2 http请求get 和 post的区别 3 整体功能介绍4 基于epoll的web服务器开发流程5 服务器代码6 libevent版本的本地web服务器 1 使用的知识点 2 http请求 get 和 post的区别 http协议请求报文格式: 1 请求行 GET /test.txt HTTP/1.1 2 请求行 健值对 3 空…

SQL索引事务

SQL索引事务 索引 创建主键约束(primary key),唯一约束(unique),外键约束(foreign key)时,会自动创建对应列的索引 1.1 查看索引 show index from 表名 现在这个表中没有索引,那么我们现在将这几个表删除之后创建新表 我们现在建立一个班级表一个学生表,并且学生表与班级表存…

EVM-MLIR:以MLIR编写的EVM

1. 引言 EVM_MLIR&#xff1a; 以MLIR编写的EVM。 开源代码实现见&#xff1a; https://github.com/lambdaclass/evm_mlir&#xff08;Rust&#xff09; 为使用MLIR和LLVM&#xff0c;将EVM-bytecode&#xff0c;转换为&#xff0c;machine-bytecode。LambdaClass团队在2周…

无人机水运应用场景

航行运输 通航管理&#xff08;海事通航管理处&#xff09; 配员核查流程 海事员通过VHF&#xff08;甚高频&#xff09;系统与船长沟通核查时间。 无人机根据AIS&#xff08;船舶自动识别系统&#xff09;报告的船舶位置&#xff0c;利用打点定位 功能飞抵船舶上方。 使用…

大型能源电力集团需要什么样的总部数据下发系统?

能源电力集团的组织结构是一个复杂的系统&#xff0c;包括多个职能部门和子分公司。这些子分公司负责具体的电力生产、销售、运维等业务。这些部门和公司协同工作&#xff0c;确保电力生产的顺利进行&#xff0c;同时关注公司的长期发展、市场拓展、人力资源管理、财务管理和公…