解决:el-tree叶子节点也被渲染上下拉箭头

逆天样式冲突导致的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透明属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值