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 = -1var name = ''switch (key) {case '头程待确认数':name = 'doc-management'status = '4'breakcase '头程待合单数':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.mzph.cn/diannao/42089.shtml

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

相关文章

【Android】【WIFI】检查 SDIO 设备的状态

检查 SDIO 设备的状态 要检查 Android 设备上 SDIO 设备的状态&#xff0c;可以使用 ADB 命令来获取系统信息。以下是一些示例命令&#xff1a; 列出 SDIO 设备 adb shell cat /proc/devices | grep sdio检查 SDIO 模块是否加载 adb shell lsmod | grep sdio获取 SDIO 相关的…

IDEA中使用Maven打包及碰到的问题

1. 项目打包 IDEA中&#xff0c;maven打包的方式有两种&#xff0c;分别是 install 和 package &#xff0c;他们的区别如下&#xff1a; install 方式 install 打包时做了两件事&#xff0c;① 将项目打包成 jar 或者 war&#xff0c;打包结果存放在项目的 target 目录下。…

自闭症在生活中的典型表现

自闭症&#xff0c;这个看似遥远却又悄然存在于我们周围的疾病&#xff0c;其影响深远且复杂。在日常生活中&#xff0c;自闭症患者的典型表现往往让人印象深刻&#xff0c;这些表现不仅揭示了他们内心的世界&#xff0c;也提醒我们要以更加包容和理解的心态去面对他们。 首先…

R语言4.3.0保姆级安装教程,包含安装包

[软件名称]&#xff1a;R语言4.3.0 R是用于统计分析、绘图的语言和操作环境。R是属于GNU系统的一个自由、免费、源代码开放的软件&#xff0c;它是一个用于统计计算和统计制图的优秀工具。 获取链接: https://pan.quark.cn/s/180306f47179 安装步骤: 1.解压压缩包。 2.进入…

EtherCAT转Profinet网关配置说明第二讲:上位机软件配置

EtherCAT协议转Profinet协议网关模块&#xff08;XD-ECPNS20&#xff09;&#xff0c;不仅可以实现数据之间的通信&#xff0c;还可以实现不同系统之间的数据共享。EtherCAT协议转Profinet协议网关模块&#xff08;XD-ECPNS20&#xff09;具有高速传输的特点&#xff0c;因此通…

iOS开发语言基础与Xcode工具初探

在iOS开发的世界里&#xff0c;Swift语言和Xcode开发工具是每个开发者旅程的起点。Swift&#xff0c;一种由Apple设计的编程语言&#xff0c;以其简洁的语法和强大的性能&#xff0c;成为了iOS开发的首选语言。而Xcode&#xff0c;则是Apple官方提供的集成开发环境&#xff08;…

Spring的核心概念理解案列

IDEA开发的简单“登陆成功”小项目 IDEA项目结构&#xff1a; 每一部分代码和相应的解读&#xff1a; com.itTony文件下有dao&#xff08;实体&#xff09;层&#xff0c;service&#xff08;服务&#xff09;层&#xff0c;编写的2个类&#xff08;HelloSpring和TestSpring&…

docker容器相关命令1(小记)

docker run 只在第一次运行时使用&#xff0c;将镜像放到容器中&#xff0c;以后再次启动这个容器时&#xff0c;只需要使用命令docker start即可。 docker run -it … /bin/bash &#xff1a;表示创建并启动容器直接进入容器的命令行&#xff0c;命令行中exit就是退出容器&…

运维锅总详解CPU

本文从CPU简介、衡量CPU性能指标、单核及多核CPU工作流程、如何平衡 CPU 性能和防止CPU过载、为什么计算密集型任务要选择高频率CPU、超线程技术、CPU历史演进及摩尔定律等方面对CPU进行详细分析。希望对您有所帮助&#xff01; 一、CPU简介 CPU&#xff08;中央处理器&#…

要想贵人相助,首先自己得先成为贵人!

点击上方△腾阳 关注 转载请联系授权 在金庸江湖里&#xff0c;有两位大侠&#xff0c;一个是萧峰&#xff0c;一个是郭靖。 郭靖在《射雕英雄传》里是绝对的主角&#xff0c;在《神雕侠侣》当中也是重要的配角&#xff0c;甚至可以说是第二主角。 谈起郭靖&#xff0c;很多…

昇思MindSpore学习入门-评价指标

当训练任务结束&#xff0c;常常需要评价函数&#xff08;Metrics&#xff09;来评估模型的好坏。不同的训练任务往往需要不同的Metrics函数。例如&#xff0c;对于二分类问题&#xff0c;常用的评价指标有precision&#xff08;准确率&#xff09;、recall&#xff08;召回率&…

20240706 每日AI必读资讯

&#x1f680;Meta 发布 AI 重磅炸弹&#xff1a;多标记预测模型现已开放研究 - 新技术采用多标记预测方法&#xff0c;有望提高性能并缩短训练时间。 - 模型同时预测多个未来单词&#xff0c;可能改善语言结构和上下文理解。 - multi-token prediction模型是Facebook基于大…

策略为王股票软件源代码-----如何修改为自己软件73------------主界面右下角,大盘指数,时间显示 ,

IDS_MAINFRAME_SHINDEXTIP "沪:%2.f %+.2f %.2f亿" IDS_MAINFRAME_SZINDEXTIP "深:%2.f %+.2f %.2f亿" 主界面右下角,大盘指数,时间显示 , if( TIMER_TIME == nIDEvent ) { CSPTime time = CSPTime::GetCurrentTime(); …

GET方法与POST方法的区别

GET方法与POST方法是HTTP协议中常用的两种请求方法&#xff0c;主要区别如下&#xff1a; GET方法 1. 数据传输位置&#xff1a;GET请求的数据通过URL传递&#xff0c;数据被附加在URL的末尾&#xff0c;以键值对的形式出现。 2. 数据长度限制&#xff1a;由于URL的长度限制&am…

AI网络爬虫001:用kimichat自动批量提取网页内容

文章目录 一、准备工作二、输入内容三、输出内容一、准备工作 在网页中按下F12键,查看定位网页元素 二、输入内容 在kimi中输入提示词: 你是一个Python编程专家,要完成一个爬取网页内容的Python脚本,具体步骤如下:在F盘新建一个Excel文件:提示词.xlsx打开网页:https:…

AI实践与学习7_AI解场景Agent应用预研demo

前言 学习大模型Agent相关知识&#xff0c;使用llama_index实现python版的Agent demo&#xff0c;根据AI解题场景知识密集型任务特点&#xff0c;需要实现一个偏RAG的Agent WorkFlow&#xff0c;辅助AI解题。 使用Java结合Langchain4j支持的RAG流程一些优化点以及自定义图结构…

Redis基础教程(九):redis有序集合

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

【踩坑】解决undetected-chromedriver报错cannot connect to-chrome

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 更新&#xff1a; 发现一个非常好用的项目&#xff0c;直接内置uc&#xff1a; GitHub - seleniumbase/SeleniumBase: &#x1f4ca; Pythons all-in…

Python 函数递归

以下是一个使用递归计算阶乘的 Python 函数示例 &#xff1a; 应用场景&#xff1a; 1. 动态规划问题&#xff1a;在一些需要逐步求解子问题并利用其结果的动态规划场景中&#xff0c;递归可以帮助直观地表达问题的分解和求解过程。 2. 遍历具有递归结构的数据&#xff1a;如递…

智能扫地机器人的电源与续航管理策略是什么

智能扫地机器人的电源与续航管理策略是一个综合性的方案&#xff0c;旨在提高电池利用效率、延长续航时间并优化用户体验。以下是一些关键的电源与续航管理策略&#xff1a; 智能能源分配系统 动态功率调整&#xff1a;根据清扫任务的需求和电池状态&#xff0c;智能调整扫地机…