解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式

/deep/.el-dropdown-menu__item.is-disabled{pointer-events:auto!important;cursor:not-allowed;}解决elementui中el-dropdown下拉菜单disabled项没有鼠标悬停的disabled样式的问题。但是问题是，当鼠标悬停在对应的disableditem上时，我们会奇迹般的发现没有mousedisabled样式，官方的还是箭头样式。问题图片如下：图片取自官网，不影响产品使用，但有时我们想优化一下效果。使其实现鼠标移入时的disabled样式，如下图，即当我们想要的效果为disabled时，当鼠标悬停时，html部分要实现disabled样式的代码。事件回调，因为稍后我们要点击这个下拉菜单。css部分回顾DOM元素样式pointer-eventsafterdisablingmenuitems简介：简单来说就是添加一个DOM元素添加这条语句后，点击这个DOM的事件会失效，即点击后没有反应。解决办法就是我们不用这个语句，然后加上cursor:not-allowed;到禁用的项目，鼠标悬停禁用样式将出现。/deep/.el-dropdown-menu__item.is-disabled{pointer-events:auto!important;cursor:not-allowed;}但是会出现一个新的问题，就是：禁用项的样式虽然可用，但禁用项也可以点击。事实并非如此。当然，有问题，自然会有解决办法。我们可以用js来控制是否可以点击。至于怎么控制，还是先看看官方文档吧。然后我们打印对应的两个参数。如果我们再次点击肉夹馍，会发现打印出来的e内容中disabled的值为true，找到规律就可以控制了。即：只有当e.disabled的值为false（表示没有被禁用）时，我们才会在对应的回调中做相关的事情，否则忽略js代码部分总结经过这么一波操作，我们就可以达到想要的效果了。最终结果如第二张图所示。我们程序员经常解决一个问题，又会出现新的问题，但是只要我们耐心思考，看资料，问题基本都能解决