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.pswp.cn/diannao/42089.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/42089.shtml
英文地址,請注明出處:http://en.pswp.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;智能調整掃地機…