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,一经查实,立即删除!

相关文章

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;因此通…

Spring的核心概念理解案列

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

运维锅总详解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(); …

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…

白嫖A100活动-入门篇-1.Linux+InterStudio

进入InterStudio 这节课是为了让大家熟悉使用InterStudio平台&#xff0c;以便后续开发 InterStudio平台是算力平台&#xff0c;可以通过平台使用A100,还可以使用“书生”团队集成好的环境、工具&#xff0c;快速部署LLMs. 进入平台&#xff1a; 记得报名&#xff0c;获得免…

Redis IO多路复用

0、前言 本文所有代码可见 > 【gitee code demo】 本文涉及的主题&#xff1a; 1、BIO、NIO的业务实践和缺陷 2、Redis IO多路复用&#xff1a;redis快的主要原因 3、epoll 架构 部分图片 via 【epoll 原理分析】 1、BIO单线程版 1.1 业务代码 client client代码相同…

Sahi+Yolov10

一、前言 了解到Sahi&#xff0c;是通过切图&#xff0c;实现提高小目标的检测效果。sahi 目前支持yolo5\yolo8\mmdet\detection2 等等算法&#xff0c;本篇主要通过实验onnx加载模型的方式使sahi支持yolov10。 二、代码 &#xff08;1&#xff09;转换模型 首先使用 conda创…

大数的排列组合公式C代码

我们知道&#xff0c;计算排列A(n,m)和组合C(n,m)可以用先求阶乘的方式实现&#xff0c;但是当数很大时求阶乘很容易溢出&#xff0c;所以这里给出非阶乘的方式求排列组合 求排列 分母和分子可以抵消&#xff0c;最后代码如下 unsigned long long A(int n, int m) {unsigned…

华为机试HJ34图片整理

华为机试HJ34图片整理 题目&#xff1a; 想法&#xff1a; 将输入的字符串中每个字符都转为ASCII码&#xff0c;再通过快速排序进行排序并输出 input_str input() input_list [int(ord(l)) for l in input_str]def partition(arr, low, high):i low - 1pivot arr[high]f…

最新扣子(Coze)实战案例:使用扩图功能,让你的图任意变换,完全免费教程

&#x1f9d9;‍♂️ 大家好&#xff0c;我是斜杠君&#xff0c;手把手教你搭建扣子AI应用。 &#x1f4dc; 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》&#xff0c;完全免费学习。 &#x1f440; 微信关注公从号&#xff1a;斜杠君&#xff0c;可获取完整版教程。&a…