记录-- vue+element树节点的标注

Posted 2022-07-13 wwj007

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>

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.children
                     if(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: '园地',
    
]