如何修改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')