Element-UI tree 組件 選中節(jié)點(diǎn)高亮的問題處理

最近新做的項(xiàng)目，有用到Element-UI tree 組件，需求是選中的節(jié)點(diǎn)背景顏色改變（默認(rèn)的太淺了），并且要求不切換的情況下一直保持高亮
由于項(xiàng)目的樹比較多，我寫了兩種
1.點(diǎn)擊后高亮顯示的背景顏色修改（但是不能一直保持不變）
.el-tree-node:focus > .el-tree-node__content {
background-color: rgb(158, 213, 250) !important;
}
這個(gè)只要改變css就可以達(dá)到效果

2.點(diǎn)擊后顯示高亮的效果，并且不切換的情況下高亮一直保持

css:
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: rgb(158, 213, 250) !important;
}

js:


image.png

image.png

node-key="id"表示使用每個(gè)節(jié)點(diǎn)的"id"對應(yīng)的值來表示每個(gè)節(jié)點(diǎn)
highlight-current"表示高亮選中的節(jié)點(diǎn)
這樣就能讓點(diǎn)擊選中的節(jié)點(diǎn)保持高亮，在不切換的情況下一直高亮

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容