如圖，需求是將el-tree改成如下樣式：
需求樣式
- 默認展開第一層，左側(cè)添加藍色條條
- 點擊任意一項時罗丰，左側(cè)添加藍色條條，其他的藍色條條均消失
我們可以自由控制el-tree里面文字的樣式咽袜，但是由于CSS暫時不支持通過子元素去查找父元素丸卷，所以無法通過自己設(shè)置樣式去修改枕稀。
可以觀察到询刹，在開啟了highlight-current時谜嫉，el-tree的選中項，均有一個is-current的類名凹联，所以我們可以通過給is-current下面的el-tree-node__content添加一個偽類沐兰，就可以實現(xiàn)左邊的藍色小條條。
`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;;
}
這樣可以實現(xiàn)在每次點擊時蔽挠，左邊都會有個小條條的需求住闯。
但是還有一個問題，就是在樹形圖默認展開的時候澳淑，該項并沒有is-current類名比原，這樣在首次加載數(shù)據(jù)時，默認展開項不會出現(xiàn)藍色小條條杠巡。
我們可以在默認展開的時候量窘，手動給第一項加一個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')
