vue+Element实现tree树形数据展示(将数据封装成树形数据)

element组件官网:https://element.eleme.cn/#/zh-CN/component/cascader

html:

<div class="block">
      <span class="demonstration">单选选择任意一级选项</span>
      <el-cascader
        :options="orgTree"
        :props="{ checkStrictly: true }"
        @change="handleChange"
        clearable></el-cascader>
 </div>

数据:

data () {
    return {
      orgs:[{value:"000/000",label:"朝阳区"},
        {value:"000/000/000",label:"中山小学"},
        {value:"000/000/000/000",label:"六年级"}
      ],
      orgTree:[]
	}
}

js:

getListData() {
      let dataArray = [];
      this.orgs.forEach(function (data) {
          let parentId;
          let index = data.value.lastIndexOf('/');
          parentId = index >= 0 ? data.value.substr(0, index)  : 0;
          if (parentId == 0) {
            let objTemp = {
              value: data.value,
              label: data.label,
              parentId: parentId,
            };
            dataArray.push(objTemp);
          }
      });
      this.data2treeDG(this.orgs, dataArray)
    },

    //--------------
    data2treeDG(orgs, dataArray) {
      for (let j = 0; j < dataArray.length; j++) {
        let dataArrayIndex = dataArray[j];//所有没有父节点的对象
        let childrenArray = [];
        let Id = dataArrayIndex.value;//没有父节点的对象的ID
        for (let i = 0; i < orgs.length; i++) {
          let data = orgs[i];


          let index = data.value.lastIndexOf('/');
          let parentId = index >= 0 ? data.value.substr(0, index)  : 0;//找出该对象的父节点 0表示不存在父节点

            if (parentId == Id) {//判断是否为儿子节点
              let objTemp = {
                value: data.value,
                label: data.label,
                parentId: parentId,
              };
              childrenArray.push(objTemp);
            }
        }
        dataArrayIndex.children = childrenArray;
        if (childrenArray.length > 0) {//有儿子节点则递归
          this.data2treeDG(orgs, childrenArray)
        }
      }
      this.orgTree = dataArray;
      return dataArray;
    },

    handleChange(value) {
      alert(value);
    }

最后调用方法,赋值:

mounted: function () {
	this.getListData();
    console.log(this.orgTree);
    }

再提供另外一种数据格式的封装:

数据:

[
    {
        "id":13,
        "parentId":0,
        "order":1,
        "name":"truck",
    },
    {
        "id":16,
        "pluginId":null,
        "parentId":0,
        "order":1,
        "name":"sca",
    },
    {
        "id":17,
        "pluginId":6,
        "parentId":16,
        "order":1,
        "name":"abcf",
    }
]

方法:

methods: {
    getListData() {
        let dataArray = [];
        this.datas.forEach(function (data) {
        if(data.enabled==true){
             let parentId = data.parentId;
              if (parentId == 0) {
                 let objTemp = {
                    id: data.id,
                    name: data.name,
                    order: data.order,
                    parentId: parentId,
                 }
                 dataArray.push(objTemp);
              }
           }
       })
       this.data2treeDG(this.datas, dataArray)
    }，
     data2treeDG(datas, dataArray) {
          for (let j = 0; j < dataArray.length; j++) {
               let dataArrayIndex = dataArray[j];
               let childrenArray = [];
               let Id = dataArrayIndex.id;
               for (let i = 0; i < datas.length; i++) {
                    let data = datas[i];
                    if(data.enabled==true){
                          let parentId = data.parentId;
                          if (parentId == Id) {//判断是否为儿子节点
                          let objTemp = {
                             id: data.id,
                             name: data.name,
                             order: data.order,
                             parentId: parentId,
                         }
                       childrenArray.push(objTemp);
                    }
                }
         }
           dataArrayIndex.children = childrenArray;
           if (childrenArray.length > 0) {//有儿子节点则递归
                  this.data2treeDG(datas, childrenArray)
           }
      }
     this.setTree = dataArray;
     return dataArray;
   },
}

最后封装的数据:

[
 {
         
        "id":44,
        "name":"扫描w2",
        "order":1,
        "parentId":0,
        "children":[
            {
                
                "id":125,
                "name":"plplupluppluplplupl",
                "order":2,
                "parentId":44,
                "children":[
                "id":44,
                           "name":"plplupluppluplplupl",
                           "order":2,
                           "parentId":44
                ]
            },
            {
                "id":124,
                "name":"pluginplugin",
                "order":2,
                "parentId":44,
                "children":[
 
                ]
            }
        ]
    }
]