html(背景：狀態(tài)標注3鐘顏色紅黃綠對應0,1,2，)

<el-tree @check="slclasscheck" v-if="treeShow" :data="slclass" show-checkbox node-key="id" :default-expanded-keys="baseCheckedKeys" :default-checked-keys="baseCheckedKeys" ref="bstree"><span class="custom-tree-node" slot-scope="obj"><span style="user-select: none;">{{obj.data && obj.data.label}}</span><span v-if="obj.data.num!=0&&obj.data.state==0" class="red-circle"></span><span v-else-if="obj.data.num!=0&&obj.data.state==1" class="yellow-circle"></span><span v-else-if="obj.data.num!=0&&obj.data.state==2" class="gray-circle"></span></span></el-tree>

在index.html引入需要數(shù)據(jù)slclass.js

<script type="text/javascript" src="js/slclass.js"></script>

js

// 狀態(tài)獲取getState: function(obj, id, over, mid, err) {if (over.indexOf(id) != -1) {obj.state = 0;} else if (mid.indexOf(id) != -1) {obj.state = 1;} else if (err.indexOf(id) != -1) {obj.state = 2;}},// 獲取子站數(shù)目getNum:function (data,id,obj) {for (let i = 0; i < 3; i++) {for(let key in data[i]){if(id &&id==key){obj.num=data[i][key]}else{let arr=obj.childrenif(arr){arr.forEach(a => {if(a.id==key){a.num=data[i][key]}});}}}}},// 獲取預警統(tǒng)計數(shù)目getWarnCount: function() {//模擬數(shù)據(jù)var data = {"0": {waterQuality1: 1, //數(shù)目為0時不做標注},"1": {waterQuality1: 12,//數(shù)目為0時不做標注},"2": {waterQuality1: 18,//數(shù)目為0時不做標注}};var over = [];var mid = [];var err = [];function classify(array, i) {for (let key in data[i]) {array.push(key);} }classify(over, 0);classify(mid, 1);classify(err, 2);slclass.forEach(obj => {let id = obj.id;this.getNum(data,id,obj)if (id) {this.getState(obj, id, over, mid, err);} else {if (obj.children) {let arr = obj.children;arr.forEach(a => {this.getState(a, a.id, over, mid, err);});}}});},created(){this.getWarnCount();this.slclass = slclass},

slclass內(nèi)容

var slclass = [{label: "地表水質(zhì)監(jiān)測",children: [{id: "waterQuality1",label: "水質(zhì)集裝箱站",},{id: "waterQuality2",label: "水質(zhì)微型站",},]},{label: "土壤采樣點",children: [{label: "園地采樣點",disabled: true},{label: "水源地二級保護區(qū)采樣點",disabled: true}]},{id: '雨量',label: '園地',} ]

轉(zhuǎn)載于:https://www.cnblogs.com/wwj007/p/11352391.html

總結(jié)

以上是生活随笔為你收集整理的记录-- vue+element树节点的标注的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。