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

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

就会有这种显示问题

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

css写得没错,问题出在Javascript当中的 getElementsByClassName("xxabc"),

这个方法得到的是一个由class="xxx"的所有元素组成的集合,而不是单个元素;
集合是没有display属性的,集合中的元素才有display属性。当你试图做 集合.style.display的时候,自然会报错。

所以你这个问题的解决方案应该是:遍历集合中所有的元素,然后给每个元素都加上display="none"的属性


解决方法如下

html 复制代码
<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

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

全部代码

js 复制代码
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 }
      })
    }
相关推荐
独立开阀者_FwtCoder5 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者8 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder8 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder9 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
rui锐rui43 分钟前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
前端wchen2 小时前
Vue 3 组件通信实战系列(一)父子组件通信的标准姿势:Props 与 Emit(含实战与进阶技巧)
前端·vue.js
程序员秘密基地3 小时前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net