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: '园地',}
]