需求:当el-dropdown-item不能点击时,应该给予用户提示,告知用户为什么不能点这个选项。方案是用户hover该el-dropdown-item后,通过tooltip提示信息。
问题:当el-dropdown-item被disabled了,外层的tooltip也会被disabled。代码如下所示:
<el-tooltip
effect="dark"
content="无新增日志权限,不可新增日志"
placement="bottom-end"
:disabled="isCouldAddLog"
>
<el-dropdown-item
href="#"
:disabled="!isCouldAddLog"
>新增日志</el-dropdown-item>
</el-tooltip>
解决方案:外层包裹一个span标签,然后设置一下样式。修改后的代码如下:
<el-tooltip
effect="dark"
content="无新增日志权限,不可新增日志"
placement="bottom-end"
:disabled="isCouldAddLog"
>
<span class="wrapper el-button">
<el-dropdown-item
:disabled="!isCouldAddLog"
>新增日志</el-dropdown-item>
</span>
</el-tooltip>
.wrapper.el-button {
display: inline-block;
padding: 0;
margin: 0;
width: 100%;
text-align: left !important;
border: none;
}
参考资料:
一个遇到过类似问题的老哥:https://github.com/ElemeFE/element/issues/8557
哎。