一、问题场景
在vue项目里使用el-table做一个列表页面,表格设置了show-overflow-tooltip属性,文字过长时鼠标滑过会展示气泡显示全部文字内容,因为设置路由缓存,如果这个时候点击鼠标滑过的单元格进行路由跳转,气泡就会在新的页面展示不消失;如下图所示
二、解决方法
1.问题bug
我在网上搜索相关帖子,看到一个说让在deactivated去遍历元素,进行手动清除
deactivated() {
let nodelist = document.getElementsByClassName('el-tooltip__popper')
if (nodelist.length > 0) {
nodelist[nodelist.length - 1].style.display = 'none'
}
}
}
尝试了下,是可以在新页面消除气泡,但是新问题来了
我回到最初的列表页,在重新划过第一个元素,他本应弹出文字气泡,却不显示了所以这个方法有bug
2.最终解决
最后我灵机一动使用v-if去控制表格显示隐藏,在activated()里面让表格显示,在deactivated让表格隐藏,完美解决!!!
代码如下(示例):
activated() {
this.showTable = true;
},
deactivated() {
// 清除黑气泡
this.showTable = false;
},
总结
activated路由组件被激活时触发。
deactivated路由组件失活时触发,
我们在对应的生命周期函数里控制组件的显隐,可以有效解决问题