解决ElementUI中tooltip出现无法显示的问题

更新时间：2023年03月11日 12:07:27 作者：小火车况且况且

这篇文章主要介绍了解决ElementUI中tooltip出现无法显示的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

ElementUI中tooltip出现无法显示

代码，当el-tooltip标签中的元素添加v-if时候，会出现无法显示问题

<el-tooltip class="item" effect="dark" width="200" placement="top">
  <div slot="content" style="width: 400px">
    {{
      scope.row.approvalMsg ? scope.row.approvalMsg : '暂无拒绝原因'
    }}
  </div>
  <i
    v-if="scope.row.status === -1"
    class="el-icon-question"
    style="margin-left: 5px; cursor: pointer"
  ></i>
</el-tooltip>

问题显示

解决办法

1. 可以直接在el-tooltip标签上添加相同的v-if标签判断

<el-tooltip 
	class="item" 
	effect="dark" 
	width="200" 
	placement="top"
	v-if="scope.row.status === -1"
>
  <div slot="content" style="width: 400px">
    {{
      scope.row.approvalMsg ? scope.row.approvalMsg : '暂无拒绝原因'
    }}
  </div>
  <i
    v-if="scope.row.status === -1"
    class="el-icon-question"
    style="margin-left: 5px; cursor: pointer"
  ></i>
</el-tooltip>

2. 可以把v-if替换为v-show

<el-tooltip 
	class="item" 
	effect="dark" 
	width="200" 
	placement="top"
>
  <div slot="content" style="width: 400px">
    {{
      scope.row.approvalMsg ? scope.row.approvalMsg : '暂无拒绝原因'
    }}
  </div>
  <i
    v-show="scope.row.status === -1"
    class="el-icon-question"
    style="margin-left: 5px; cursor: pointer"
  ></i>
</el-tooltip>

让elementui的slider 一直显示tooltip

elementui的slider控件

    <el-slider
              v-model="value1"
              :min="1"
              :max="100"
              :show-tooltip="true"
              :format-tooltip="formatTooltip"
              :disabled="isQuestion"
              ref="slider1"
            />

打印这个控件

this.$nextTick(() => {
console.log(this.$refs.slider1)
})

输出如下

调用这个函数，这个时候tooltip就显示出来了，问题解决

this.$nextTick(() => {
  this.$refs.slider1.setPosition(70)
})

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

前端Vue数据不更新问题的深入分析与解决方案
在前端开发中,Vue.js 是一个非常流行的 JavaScript 框架,它以其简洁的语法和强大的响应式系统而闻名,然而,尽管 Vue 的响应式系统非常强大,但在实际开发中,开发者仍然可能会遇到数据不更新的问题,本文将深入探讨 Vue 数据不更新的常见原因,并提供详细的解决方案
2025-03-03
基于Vuejs的搜索匹配功能实现方法
下面小编就为大家分享一篇基于Vuejs的搜索匹配功能实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue日历组件的封装方法
这篇文章主要为大家详细介绍了vue封装一个日历组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue.js结合SortableJS实现树形数据拖拽
本文主要介绍了Vue.js结合SortableJS实现树形数据拖拽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue如何实现左右滑动tab(vue-touch)
这篇文章主要介绍了vue如何实现左右滑动tab(vue-touch)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue 动态样式绑定 class/style的写法小结
这篇文章主要介绍了vue 动态样式绑定 class/style的写法小结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
html页面引入vue组件之http-vue-loader.js解读
这篇文章主要介绍了html页面引入vue组件之http-vue-loader.js解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue实现动态添加元素(可删除)
文章介绍了如何在Vue中动态添加和删除元素,通过使用Vue的响应式数据和v-for指令,可以轻松地实现这一功能,文章还详细讲解了如何处理元素的添加和删除事件,以及如何更新视图以反映这些变化
2024-12-12
vue如何进行动画的封装
这篇文章主要介绍了vue如何进行动画的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-09-09
Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
这篇文章主要介绍了Vue实现点击显示再点击隐藏点击页面空白区域也隐藏效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01