餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)
問題描述
我們知道樹節(jié)點常常需要選擇,為了看得更加直觀明顯,所以我們需要設(shè)置選中的時候,讓選中的那個樹節(jié)點顏色高亮,本文記錄一下常用的三種方式,我們先看一下效果圖
效果圖
方式一
第一步:
el-tree組件標簽上添加高亮屬性 highlight-current
,表示要開啟高亮功能。
第二步:
然后在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>
注意這種方式是選中樹節(jié)點高亮,即:樹節(jié)點獲取焦點是高亮,如果樹節(jié)點失去焦點,也就是說點擊了別的地方依然是高亮狀態(tài),即還保留高亮狀態(tài)
方式二
如果是想要那種,選中高亮,不選中就不高亮的效果,我們單獨使用css設(shè)置即可,這個時候就不用在樹組件上加上highlight-current
屬性了,直接一句話獲取焦點確定即可,如下語句:
<style lang="less" scoped> /deep/ .el-tree-node:focus > .el-tree-node__content { background-color: #bfa !important; } </style>
上述兩種方式都是通過css方式去控制的,我們也可以通過js方式去控制的,比如默認第一項高亮
指定默認高亮樹節(jié)點
使用el-tree
組件的setCurrentKey
方法,根據(jù)樹組件的樹節(jié)點的唯一id來制定某個樹節(jié)點高亮。當然要搭配node-key="id"
給樹節(jié)點綁定唯一標識id,同時也要開啟高亮模式(加上highlight-current
屬性),然后方式一設(shè)置高亮的顏色樣式要加上。初始化加載默認高亮,所以在mounted
鉤子中書寫代碼即可。
完整代碼
<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 默認讓第一項高亮 // data是樹組件對應(yīng)的數(shù)據(jù) // 通過data中的第一項的id找到對應(yīng)的節(jié)點,然后把這個節(jié)點設(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方法是通過 key 設(shè)置某個節(jié)點的當前選中狀態(tài),使用此方法必須設(shè)置 node-key 屬性,因為要確定唯一性,node-key="id"因為一般都是id具有唯一性,所以綁定id。
總結(jié)
到此這篇關(guān)于餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)的文章就介紹到這了,更多相關(guān)餓了么UI el-tree樹節(jié)點選中高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue關(guān)于接口請求數(shù)據(jù)過大導致瀏覽器崩潰的問題
這篇文章主要介紹了vue關(guān)于接口請求數(shù)據(jù)過大導致瀏覽器崩潰的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08