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