Element-ui中树形控件的使用

---

前言

这里展示一下借助官方文档实现树形控件的过程

---

一、官方文档

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

二、后端数据

{
    "msg": "success",
    "code": 0,
    "data": [
        {
            "spuId": 6,
            "spuName": "a",
            "skuInfo": {
                "1": "a 黑色 8GB 8+128",
                "2": "a 黑色 8GB 8+256",
                "3": "a 黑色 12GB 8+128",
                "4": "a 黑色 12GB 8+256",
                "5": "a 白色 8GB 8+128",
                "6": "a 白色 8GB 8+256",
                "7": "a 白色 12GB 8+128",
                "8": "a 白色 12GB 8+256",
                "9": "a 蓝色 8GB 8+128",
                "10": "a 蓝色 8GB 8+256",
                "11": "a 蓝色 12GB 8+128",
                "12": "a 蓝色 12GB 8+256"
            }
        },
        {
            "spuId": 7,
            "spuName": "a",
            "skuInfo": {
                "16": "a 黑色 12GB 8+256",
                "17": "a 白色 8GB 8+128",
                "18": "a 白色 8GB 8+256",
                "19": "a 白色 12GB 8+128",
                "20": "a 白色 12GB 8+256",
                "21": "a 蓝色 8GB 8+128",
                "22": "a 蓝色 8GB 8+256",
                "23": "a 蓝色 12GB 8+128",
                "24": "a 蓝色 12GB 8+256",
                "13": "a 黑色 8GB 8+128",
                "14": "a 黑色 8GB 8+256",
                "15": "a 黑色 12GB 8+128"
            }
        }
    ]

自定义写法

<el-input v-model="dataForm.skuId" placeholder="商品id" style="width: 300px;"></el-input>
        <el-button type="primary" v-if="button_vis" @click="$event => showTree()" plain >查看商品Id</el-button>
        <el-button type="primary" v-if="button_not_vis" @click="$event =>hideTree()" plain>隐藏商品Id</el-button>



return {
      TreeData : [],
      defaultProps: {
          children: 'children',
          label: 'label'
        }
}

methods {
	  showTree(){
      var _this=this;  //this指向vue 
      this.$http({
        url: this.$http.adornUrl(`/product/skuinfo/getAllSkuInfo`),
        method: "get"
      }).then((resp) => {
        console.log(resp);
            for(let i=0;i<resp.data.data.length;i++){
              console.log(resp.data.data[i].spuName);
              _this.TreeData.push({'label' : resp.data.data[i].spuName,'children': []})
              // _this.TreeData[i].label=resp.data.data[i].spuName;
              const data2 = resp.data.data[i].skuInfo;
              console.log(data2);
              for(let item in data2){
                let str = item +'_'+ data2[item];
                console.log(str);
                this.TreeData[i].children.push({'label' : str})
                // _this.TreeData[i].children[j].label=resp.data.data[i].skuInfo[j]
              }
            }

      })

        this.button_vis = false;
        this.button_not_vis = true;
    },
    hideTree(){
      console.log("hideTree");
        this.button_vis = true;
        this.button_not_vis = false;  
    },
}

---

总结

很简单一个demo,主要复习Vue向数组里动态添加元素的写法，其他的按照文档就好了