如何修改el-tree默認選中項的樣式

如圖,需求是將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')
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奕谭,一起剝皮案震驚了整個濱河市耳璧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌展箱,老刑警劉巖旨枯,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異混驰,居然都是意外死亡攀隔,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門栖榨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昆汹,“玉大人,你說我怎么就攤上這事婴栽÷郑” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵愚争,是天一觀的道長映皆。 經(jīng)常有香客問我挤聘,道長,這世上最難降的妖魔是什么捅彻? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任组去,我火速辦了婚禮,結(jié)果婚禮上步淹,老公的妹妹穿的比我還像新娘从隆。我一直安慰自己,他們只是感情好缭裆,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布键闺。 她就那樣靜靜地躺著,像睡著了一般澈驼。 火紅的嫁衣襯著肌膚如雪艾杏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天盅藻,我揣著相機與錄音购桑,去河邊找鬼。 笑死氏淑,一個胖子當著我的面吹牛勃蜘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播假残,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼缭贡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了辉懒?” 一聲冷哼從身側(cè)響起阳惹,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎眶俩,沒想到半個月后莹汤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡颠印,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年纲岭,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片线罕。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡止潮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出钞楼,到底是詐尸還是另有隱情喇闸,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站燃乍,受9級特大地震影響唆樊,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜橘沥,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一窗轩、第九天 我趴在偏房一處隱蔽的房頂上張望夯秃。 院中可真熱鬧座咆,春花似錦、人聲如沸仓洼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽色建。三九已至哺呜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間箕戳,已是汗流浹背某残。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留陵吸,地道東北人玻墅。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像壮虫,于是被迫代替她去往敵國和親澳厢。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容