el-tooltip数据更新后提示框不能进行显示

最新推荐文章于 2025-02-14 17:10:31 发布

原创最新推荐文章于 2025-02-14 17:10:31 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

前端问题专栏收录该内容

16 篇文章

订阅专栏

博客内容描述了一个Vue应用中遇到的问题，即在新增数据后，el-tooltip组件未能正确显示更新的数据。问题的原因是el-tooltip已经生成且不响应数据变化。通过将v-if条件判断移至el-tooltip内，确保只有在数据满足条件时才渲染该组件，从而解决了这个问题。修复后的代码展示了如何改进v-if的位置以实现预期效果。

问题代码如下

<el-tooltip :content="data.name" :disabled="showSelected"  placement="bottom" effect="light" >
    <div class="name" @mouseover="mouseOver(data)" v-if="data.name !== data.originname">
        <span>{{data.name}}</span>
    </div>
</el-tooltip>

问题显示具体描述

当新增数据时，相关新增的数据能够正常进行显示，但是其相关的el-tooltip提示框中的数据不能正常进行显示。即el-tooltip提示框中没有相关的数据信息进行显示。

问题出现原因

当修改了相关的数据后，span中会显示出相关的数据，而el-tooltip无论其数据是否进行了相关的修改，el-tooltip已经生成了。

解决方案

将v-if这个条件判断放入到el-tooltip中，当数据进行修改后，即满足了v-if中相关的条件后，即会出现相关的提示框信息。

解决后的代码

<el-tooltip :content="data.name" :disabled="showSelected"  placement="bottom" effect="light" v-if="data.name !== data.originname">
    <div class="name" @mouseover="mouseOver(data)">
        <span>{{data.name}}</span>
    </div>
</el-tooltip>