tooltip包裹的标题,点击跳转后,提示框不消失
就会有这种显示问题
下面这种错误方法不可行,解决办法往下翻
css写得没错,问题出在Javascript当中的 getElementsByClassName(“xxabc”),
这个方法得到的是一个由class="xxx"的所有元素组成的集合,而不是单个元素;
集合是没有display属性的,集合中的元素才有display属性
。当你试图做 集合.style.display的时候,自然会报错。
所以你这个问题的解决方案应该是:遍历集合中所有的元素,然后给每个元素都加上display="none"的属性
解决方法如下
<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 }
})
}