el-tooltip无法显示的问题

1.需求

需要在表格中的实例名上添加鼠标悬停显示tooltip的效果;
el-tooltip无法显示的问题_第1张图片

2.遇到的问题

因为该表格中该列的实例名是超链接,且该超链接组件是我们自己封装的,代码如下
el-tooltip无法显示的问题_第2张图片


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

el-tooltip无法显示的问题_第3张图片el-tooltip无法显示的问题_第4张图片

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

3.解决办法

组件放到标签的里面,给显示值{{ tableScope.row.name }}外面加一个,代码如下
el-tooltip无法显示的问题_第5张图片

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

你可能感兴趣的:(前端,javascript,vue.js)