如何修改el-tree默认选中项的样式
如图，需求是将el-tree改成如下样式：
需求样式
默认展开第一层，左侧添加蓝色条条
点击任意一项时，左侧添加蓝色条条，其他的蓝色条条均消失
我们可以自由控制el-tree里面文字的样式，但是由于CSS暂时不支持通过子元素去查找父元素，所以无法通过自己设置样式去修改。
可以观察到，在开启了highlight-current时，el-tree的选中项，均有一个is-current的类名，所以我们可以通过给is-current下面的el-tree-node__content添加一个伪类，就可以实现左边的蓝色小条条。
`is-current
代码如下：
/deep/.is-current>.el-tree-node__content{
background: #F4F6F8;
position: relative;
}
/deep/.is-current>.el-tree-node__content::before{
content: "";
position: absolute;
width: 3px;
height: 100%;
background: #1989FA;
top: 0;
left: 0;;
}
这样可以实现在每次点击时，左边都会有个小条条的需求。
但是还有一个问题，就是在树形图默认展开的时候，该项并没有is-current类名，这样在首次加载数据时，默认展开项不会出现蓝色小条条。
我们可以在默认展开的时候，手动给第一项加一个is-current类名。最好写到nextTick里面。
this.$nextTick(()=>{
let dom=document.getElementById('department').childNodes[0]
dom.className+=' is-current'
})
但是这样还有一个问题，就是在点击别的项的时候，默认展开项的蓝色条条并没有消失。所以我们还要在点击事件中，把这个类名给删掉，删掉后，如果点击的事默认展开项，组件会再自动加上这个类名，所以不用担心~
let dom=document.getElementById('department').childNodes[0]
dom.classList.remove('is-current')
发表评论 (审核通过后显示评论)：