如圖，需求是將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')
