逆天样式冲突导致的el-tree叶子阶段贝渲染上下拉箭头的bug
一、问题:如下图,前端渲染上把每一级节点全部渲染上了这种下拉的箭头,按照正常逻辑只有包含children的节点才需要有这种展开箭头,叶子节点由于没有子元素不需要展开,但是我这里最后一级节点也渲染上了,并且点击下拉箭头是无效的。
前后对比:
二、分析
选中查看样式,el-tree-node__expand-icon这里发现为箭头标签是加了一个颜色的样式。
再看我们叶子节点的样式,叶子节点也有很明显的标识.el-tree-node__expand-icon.is-leaf的color属性很明显没有生效,这里应该是el-tree的默认样式。
于是查看代码中发现原来是同事再在移植代码的过程中为标签加了颜色,覆盖了原来的默认颜色,但是又并没有考虑到叶子节点的样式问题。
三、解决
了解了问题产生的原因,接下来问题就很好解决了,要么删除自定义的el-tree-node__expand-icon样式,全部使用el-tree的默认样式,要么手动为叶子阶段添加一个transparent透明属性。