el-tooltip配合el-button禁用时显示提示的问题
更新时间：2025年06月03日 09:41:42 作者：A-sleep
这篇文章主要介绍了el-tooltip配合el-button禁用时显示提示的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
el-tooltip配合el-button禁用时显示提示
比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。
可能有时候按钮会禁用不让点击。有时候按钮是正常的状态，允许点击。
所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；如果是正常状态，当鼠标悬浮的时候就不出现任何变化。好像挺简单的，不过里面有一个细节，需要注意下。
饿了么ui中的el-tooltip组件具有开启和关闭的功能，但是如果我们直接把组件套在el-button外面，我们会发现，el-tooltip无法开启了，好像也被el-button的禁用，无法打开了。
解决方案
就是在el-button的外层，再加上一个div包裹起来，这样的话，类名el-tooltip就会加到div身上，就不会受到按钮禁用的影响了。
我们先看一下最终的效果图
<el-table-column label="操作" align="center" width="220px">
<template #default="{ row }">
<el-tooltip
effect="dark"
:disabled="row.DiskState !== 'ATTACHED'"
content=""
placement="top"
>
//将提示语换行显示，如不需要换行直接写入上方content
<div style="width: 140px" slot="content">
正常生命周期的弹性数据盘云硬盘才能直接扩容
</div>
// 需要用标签包裹 禁用时才会显示提示语效果
<span style="margin: 0 10px">
<el-button
:disabled="row.DiskState === 'ATTACHED'"
type="text"
size="small"
@click="checkDetails(row)"
>
磁盘扩容
</el-button>
</span>
</el-tooltip>
<el-button type="text" size="small" @click="delcvmCbs(row)">
资源销毁
</el-button>
</template>
</el-table-column>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决Vue警告Write operation failed:computed value is readonl
这篇文章主要给大家介绍了关于如何解决Vue警告Write operation failed:computed value is readonly的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了vue实现侧边定位栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了基于Element的组件改造的树形选择器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Vue-cli3多页面配置详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
使用vue的时候,想要获得一个指定的元素的高度时,下面这篇文章主要给大家介绍了关于如何在Vue中获取DOM元素的实际宽高的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
关于Vue中echarts响应式页面变化resize()的用法介绍
Vue项目中开发数据大屏，使用echarts图表根据不同尺寸的屏幕进行适配，resize()可以调用echarts中内置的resize函数进行自适应缩放，本文将给大家详细介绍resize()的用法,需要的朋友可以参考下2023-06-06
在Vue3中，有多种方法可以实现组件之间的通信，本文就通过代码示例给大家总结一些vue3实现组件通信的常用方法,需要的朋友可以参考下2023-06-06
在 Vue 3 中,封装自定义指令可以帮助你更好地复用一些常见的DOM操作逻辑,自定义指令可以用于处理一些特定的用户交互行为,本文给大家介绍了Vue3封装自定义指令的示例,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了nuxt实现封装axios并且获取token,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了详解polyfills如何按需加载及场景示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论