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