餓了么UI中el-tree樹(shù)節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
問(wèn)題描述
我們知道樹(shù)節(jié)點(diǎn)常常需要選擇,為了看得更加直觀明顯,所以我們需要設(shè)置選中的時(shí)候,讓選中的那個(gè)樹(shù)節(jié)點(diǎn)顏色高亮,本文記錄一下常用的三種方式,我們先看一下效果圖
效果圖
方式一
第一步:
el-tree組件標(biāo)簽上添加高亮屬性 highlight-current
,表示要開(kāi)啟高亮功能。
第二步:
然后在css中深度作用域高亮樣式代碼即可
<style lang="less" scoped> /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { // 設(shè)置顏色 background-color: #baf !important; } </style>
注意這種方式是選中樹(shù)節(jié)點(diǎn)高亮,即:樹(shù)節(jié)點(diǎn)獲取焦點(diǎn)是高亮,如果樹(shù)節(jié)點(diǎn)失去焦點(diǎn),也就是說(shuō)點(diǎn)擊了別的地方依然是高亮狀態(tài),即還保留高亮狀態(tài)
方式二
如果是想要那種,選中高亮,不選中就不高亮的效果,我們單獨(dú)使用css設(shè)置即可,這個(gè)時(shí)候就不用在樹(shù)組件上加上highlight-current
屬性了,直接一句話獲取焦點(diǎn)確定即可,如下語(yǔ)句:
<style lang="less" scoped> /deep/ .el-tree-node:focus > .el-tree-node__content { background-color: #bfa !important; } </style>
上述兩種方式都是通過(guò)css方式去控制的,我們也可以通過(guò)js方式去控制的,比如默認(rèn)第一項(xiàng)高亮
指定默認(rèn)高亮樹(shù)節(jié)點(diǎn)
使用el-tree
組件的setCurrentKey
方法,根據(jù)樹(shù)組件的樹(shù)節(jié)點(diǎn)的唯一id來(lái)制定某個(gè)樹(shù)節(jié)點(diǎn)高亮。當(dāng)然要搭配node-key="id"
給樹(shù)節(jié)點(diǎn)綁定唯一標(biāo)識(shí)id,同時(shí)也要開(kāi)啟高亮模式(加上highlight-current
屬性),然后方式一設(shè)置高亮的顏色樣式要加上。初始化加載默認(rèn)高亮,所以在mounted
鉤子中書(shū)寫(xiě)代碼即可。
完整代碼
<template> <div class="box"> <el-tree ref="myTree" node-key="id" :data="data" :props="defaultProps" highlight-current > </el-tree> </div> </template> <script> export default { data() { return { data: [ { name: "西游記", id: "xiyouji", children: [ { name: "孫悟空", id: "sunwukong", children: [ { name: "大猴子", id: "dahouzi", children: [], }, { name: "二猴子", id: "erhouzi", children: [], }, ], }, { name: "豬八戒", id: "zhubajie", children: [], }, { name: "沙和尚", id: "shaheshang", children: [], }, ], }, { name: "水滸傳", id: "shuihuzhuan", children: [ { name: "宋江", id: "songjiang", children: [], }, { name: "武松", id: "wusong", children: [], }, ], }, ], defaultProps: { children: "children", label: "name", }, }; }, mounted() { this.$nextTick(function () { this.$nextTick(() => { // myTree 數(shù)組件的ref 默認(rèn)讓第一項(xiàng)高亮 // data是樹(shù)組件對(duì)應(yīng)的數(shù)據(jù) // 通過(guò)data中的第一項(xiàng)的id找到對(duì)應(yīng)的節(jié)點(diǎn),然后把這個(gè)節(jié)點(diǎn)設(shè)置為高亮 this.$refs.myTree.setCurrentKey(this.data[0].id); }); }); }, }; </script> <style lang="less" scoped> // 設(shè)置高亮顏色 /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: #baf !important; } </style>
setCurrentKey方法是通過(guò) key 設(shè)置某個(gè)節(jié)點(diǎn)的當(dāng)前選中狀態(tài),使用此方法必須設(shè)置 node-key 屬性,因?yàn)橐_定唯一性,node-key="id"因?yàn)橐话愣际莍d具有唯一性,所以綁定id。
總結(jié)
到此這篇關(guān)于餓了么UI中el-tree樹(shù)節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)的文章就介紹到這了,更多相關(guān)餓了么UI el-tree樹(shù)節(jié)點(diǎn)選中高亮內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue2+elementUI的el-tree的選中、高亮、定位功能的實(shí)現(xiàn)
- ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
- el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
- el-tree設(shè)置選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的方法
- 解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑
- el-tree樹(shù)狀控件如何定位到選中的節(jié)點(diǎn)的位置
相關(guān)文章
vue關(guān)于接口請(qǐng)求數(shù)據(jù)過(guò)大導(dǎo)致瀏覽器崩潰的問(wèn)題
這篇文章主要介紹了vue關(guān)于接口請(qǐng)求數(shù)據(jù)過(guò)大導(dǎo)致瀏覽器崩潰的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue?頁(yè)面卡死,點(diǎn)擊無(wú)反應(yīng)的問(wèn)題及解決
這篇文章主要介紹了vue?頁(yè)面卡死,點(diǎn)擊無(wú)反應(yīng)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue如何在多個(gè)不同服務(wù)器下訪問(wèn)不同地址
這篇文章主要介紹了vue如何在多個(gè)不同服務(wù)器下訪問(wèn)不同地址,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue框架制作購(gòu)物車(chē)小球動(dòng)畫(huà)效果實(shí)例代碼
最近在學(xué)習(xí)前端制作了一個(gè)購(gòu)物車(chē)小球的動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-09-09vue2老項(xiàng)目vite升級(jí)改造過(guò)程記錄
目前vite主要默認(rèn)是支持給vue3使用的,并且如果使用官方的cli創(chuàng)建的項(xiàng)目一樣會(huì)默認(rèn)使用vue3去構(gòu)建項(xiàng)目,此時(shí)對(duì)于一些vue2的老項(xiàng)目就顯得不友好了,下面這篇文章主要給大家介紹了關(guān)于vue2老項(xiàng)目vite升級(jí)改造的相關(guān)資料,需要的朋友可以參考下2022-12-12element-ui封裝一個(gè)Table模板組件的示例
這篇文章主要介紹了element-ui封裝一個(gè)Table模板組件的示例,幫助大家更好的理解和學(xué)習(xí)vue框架的使用,感興趣的朋友可以了解下2021-01-01