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

最新推荐文章于 2024-08-07 09:42:22 发布

weixin_30851867

最新推荐文章于 2024-08-07 09:42:22 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wwj007/p/11352391.html

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

转载于:https://www.cnblogs.com/wwj007/p/11352391.html