vue 使用el-table 设置了show-overflow-tooltip属性，路由跳转后，气泡不消失的解决办法

本文主要是介绍vue 使用el-table 设置了show-overflow-tooltip属性，路由跳转后，气泡不消失的解决办法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

---

一、问题场景

在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路由组件失活时触发，
我们在对应的生命周期函数里控制组件的显隐，可以有效解决问题

这篇关于vue 使用el-table 设置了show-overflow-tooltip属性，路由跳转后，气泡不消失的解决办法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---