如圖，需求是將el-tree改成如下樣式：

需求樣式

• 默認(rèn)展開(kāi)第一層，左側(cè)添加藍(lán)色條條
• 點(diǎn)擊任意一項(xiàng)時(shí)，左側(cè)添加藍(lán)色條條，其他的藍(lán)色條條均消失

我們可以自由控制el-tree里面文字的樣式，但是由于CSS暫時(shí)不支持通過(guò)子元素去查找父元素，所以無(wú)法通過(guò)自己設(shè)置樣式去修改。

可以觀察到，在開(kāi)啟了highlight-current時(shí)，el-tree的選中項(xiàng)，均有一個(gè)is-current的類(lèi)名，所以我們可以通過(guò)給is-current下面的el-tree-node__content添加一個(gè)偽類(lèi)，就可以實(shí)現(xiàn)左邊的藍(lá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;;
    }

這樣可以實(shí)現(xiàn)在每次點(diǎn)擊時(shí)，左邊都會(huì)有個(gè)小條條的需求。

但是還有一個(gè)問(wèn)題，就是在樹(shù)形圖默認(rèn)展開(kāi)的時(shí)候，該項(xiàng)并沒(méi)有is-current類(lèi)名，這樣在首次加載數(shù)據(jù)時(shí)，默認(rèn)展開(kāi)項(xiàng)不會(huì)出現(xiàn)藍(lán)色小條條。
我們可以在默認(rèn)展開(kāi)的時(shí)候，手動(dòng)給第一項(xiàng)加一個(gè)is-current類(lèi)名。最好寫(xiě)到nextTick里面。

this.$nextTick(()=>{
    let dom=document.getElementById('department').childNodes[0]
    dom.className+=' is-current'
})

但是這樣還有一個(gè)問(wèn)題，就是在點(diǎn)擊別的項(xiàng)的時(shí)候，默認(rèn)展開(kāi)項(xiàng)的藍(lán)色條條并沒(méi)有消失。所以我們還要在點(diǎn)擊事件中，把這個(gè)類(lèi)名給刪掉，刪掉后，如果點(diǎn)擊的事默認(rèn)展開(kāi)項(xiàng)，組件會(huì)再自動(dòng)加上這個(gè)類(lèi)名，所以不用擔(dān)心~

let dom=document.getElementById('department').childNodes[0]
dom.classList.remove('is-current')