el-tooltip无法显示的问题

本文探讨了在前端表格中为超链接实例名添加Tooltip效果时遇到的页面刷新后Tooltip消失的问题。作者发现将Tooltip组件放置在自定义超链接组件外部会导致不稳定的表现,并尝试通过使用`:key`属性强制重新渲染来解决,但问题依然存在。最终,通过将Tooltip组件放入超链接内部并用`<span>`包裹实例名,成功实现了稳定显示Tooltip的效果,无论页面是否刷新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.需求

需要在表格中的实例名上添加鼠标悬停显示tooltip的效果;
在这里插入图片描述

2.遇到的问题

因为该表格中该列的实例名是超链接,且该超链接组件是我们自己封装的,代码如下
在这里插入图片描述


我在<opt-link></opt-link>标签的外面添加一个<el-tooltip></el-tooltip>标签,确实可以实现鼠标悬停展示tooltip的效果;
但是只要页面手动刷新,该tooltip就无法显示了。

在这里插入图片描述在这里插入图片描述

我一开始还以为是在js中写了$set()方法导致<el-tooltip>组件加载有问题,所以我还给<el-tooltip>组件加了一个:key属性,该属性的值toRender是变化的,Js中每$set()一次,该toRender值就+1,保证每次$set(),该<el-tooltip>组件都重新渲染;
但是页面有时候刷新还是会出现没有展示tooltip的问题,时好时坏。

3.解决办法

<el-tooltip>组件放到<opt-link></opt-link>标签的里面,给显示值{{ tableScope.row.name }}外面加一个<span></span>,代码如下
在这里插入图片描述

<span></span>组件一定要加,否则表格中无法显示该列的值;这样写,无论是否刷新页面都会显示tooltip,问题解决。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值