解决ElementUI级联选择器的禁用样式问题

发现问题
解决
写在最后

发现问题

最近我在项目中使用到了ElementUI级联选择器，不得不说ElementUI真的很强大（老师说在批评一个人的缺点之前需要先肯定他的优点，这样才不会被打），然而在当我根据具体场景需要禁用这个级联选择器的时候，发现了如下几个问题：
1 禁用的字体都是灰色的，但是中间的分隔符还是黑色的
2 虽然是禁用状态，但是鼠标移入到下拉框的时候，竟然还是小手的状态（表示可以点击）
如下图：

嗯？？？小老弟你出来我们谈谈，为什么会这样？？？

但是因为这样一点问题而弃用这么强大的一款组件是不可能的，作为一个有追求（苦逼）的前端工程师（请允许我用一下这个高大上的称号），这点小问题，just so so啦

解决

我的第一想法是通过css的cursor: not-allowed以及设置字体颜色去改变中间的分隔符颜色以及鼠标状态，但是怎么去设置发现分隔符还是黑色的，在我感叹Element的开发工程师的技术强大和我本人的渺小之时，我突然看到了这个：

为什么在下面有个span？？？Are you kidding me？？？我一直在给那个input设置字体颜色，所以当然没有效果啦，下面这个span才是用户真正看到的内容本体，然后实现方法是用了绝对定位定位到了input输入框的位置，虽然我不知道为什么要用这种方式实现赋值但是好歹也算是找到了解决办法了（在你的重置样式表或者common.css内添加，不要放到当前组件的scoped中，会不起作用）：


.cascaderDisabled .el-input__inner:hover {cursor: not-allowed;
}.cascaderDisabled span {pointer-events: none;
}.cascaderDisabled .el-cascader__label span {color: #c0c4cc;
}

perfect！下面我们来看看实现效果：

是不是很nice！鼠标移入也变成了禁止输入的样式，就是红色圈圈带个杠那种，我的截图工具截不到鼠标，这就有点尴尬了，大家就勉强意会一下吧哈哈哈。

写在最后

以上就是解决ElementUI级联选择器的禁用样式问题的一个小方法，希望能给您带来一些帮助，感谢阅读。