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-tooltipeffect="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>

el-tooltip配合el-button禁用时显示提示相关推荐

微信小程序设置button禁用时的样式disabled
/* 设置不可用状态的背景色 */ button[disabled]{background-color: #ccc; }
ionic开发——图片加载失败或不存在时显示提示图片的解决方法
当图片加载失败或者不存在的时候,我们需要一张提示图片来代替他.用判断就太麻烦了,img有自己的方法onerror , 当找不到图片的时候就会执行onerror里面的代码例如: <img src ...
html文本框中加提示,如何使HTML文本框为空时显示提示？
您可以使用HTML中的属性设置占位符(浏览器支持).该和可以用CSS改变(虽然浏览器的支持是有限的).placeholderfont-stylecolor input[type=search]::-w ...
MFC中通过Tooltip类来实现悬浮鼠标显示提示信息
方法一: 利用CWnd本身自身支持的tooptip来实现,这种方法适用给控件增加tooltip,非常方便和简单方法如下: 1.在窗口中增加消息映射ON_NOTIFY_EX(TTN_NEEDTEXT, ...
html鼠标悬停显示窗口,javascript-页面中鼠标移动或停留均显示提示框
鼠标移动到隐藏内容时显示提示框,鼠标停留在提示框时依旧显示.鼠标离开提示框和隐藏内容时提示框消失. 使用时配合table框是固定宽度,将超过宽度的多余信息予以用省略号显示. 将table框CSS设置为 ...
java如何设置文本框提示_[Java教程]一个友好的文本框内显示提示语 jquery 插件
[Java教程]一个友好的文本框内显示提示语 jquery 插件 0 2014-08-08 18:01:25 插件实现文本框内默认显示提示语,当文本框获得焦点时提示语消失. 如果没有输入或输入为空则失 ...
sqlsever无法重新启动计算机,有关SqlServer 2008安装及卸载的一些问题,安装检测时显示重新启动计算机....
安装检测时显示"重新启动计算机". "需要重新启动计算机.必须重新启动计算机才能安装SQL Server.",重启后还是显示同样的问题, 解决方法: 1.开始菜 ...
解决echart在tab中切换时显示不正确
在VUE使用Element UI时,在el-tab-pane添加上lazy='true'属性即可 <el-tab-pane label="远程测试控制" name=" ...
android button 属性,两行显示数字,前面各有图像,Android_2_常用控件及常用属性
安卓常用控件及其常用属性 TextView android:id 这是唯一地标识控件的ID. android:capitalize 如果设置,指定该TextView中有一个文本输入法会自动利用什么类 ...

el-tooltip配合el-button禁用时显示提示

el-tooltip配合el-button禁用时显示提示相关推荐

最新文章

热门文章