el-table tooltip触发,切换页面,导致提示信息不消失悬停左上角

1.原因:使用tooltip,鼠标划入触发,快速切换其他页面,在当前页鼠标位置获取不到,导致悬停出现在其他位置
 

2.引发操作:触发tooltip,快速切换页面,原先触发的tooltip并未被销毁,且未被display:none导致,未获取到位置,就定位到左上角

上述问题页面缓存才会出现

3.解决:在页面组件生命周期中,deactivated停用时,去设置tooltip display:none或dom元素删除

 deactivated() {
    let list = document.getElementsByClassName("el-tooltip__popper");
      if (list.length > 0) {
        list[list.length - 1].style.display = "none";
    }    
}

删除不确定是否会导致其他问题,未测试。因此是display,

版本:vue2.x、elementui2.x

其他:如果以上方式未能解决,可以使用 v-if 对组件销毁重建来处理,原因还是由缓存导致

参考链接:[Bug Report] 使用用了这个show-overflow-tooltip 属性,然后这个属性被触发了,但是因为鼠标位置获取不到了,所以会导致这个悬停出现在其它地方 · Issue #20372 · ElemeFE/element · GitHub

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值