html(背景：狀態標注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引入需要數據slclass.js

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

js

// 狀態獲取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;}},// 獲取子站數目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]}});}}}}},// 獲取預警統計數目getWarnCount: function() {//模擬數據var data = {"0": {waterQuality1: 1, //數目為0時不做標注},"1": {waterQuality1: 12,//數目為0時不做標注},"2": {waterQuality1: 18,//數目為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內容

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

轉載于:https://www.cnblogs.com/wwj007/p/11352391.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。