根据非树结构循环为树形结构

╰半橙微兮° 2022-10-15 09:53 154阅读 0赞

<template>
      <div>
       根据非树结构循环为树形结构
      </div>
    </template>
    <script>
      export default { 
        components:{ 
          
        },
        data() { 
          return { 
            data:[
              {    
                  "name": "女装/男装/内衣",    
                  "parentId": null ,   //父级id
                  "id": '20210304' //唯一标识id 
              }, 
              {   "name": "女装",    "parentId": "20210304", "id": '1030401'}, 
              {   "name": "男装",    "parentId": "20210304", "id": '1030402'}, 
              {   "name": "童装",    "parentId": "20210304", "id": '1030403'}, 
              {   "name": "内衣",    "parentId": "20210304", "id": '1030404'}, 
              {    
                  "name": "连衣裙/毛呢外套/休闲裤/牛仔外套",    
                  "parentId": null ,   //父级id
                  "id": '20210305'
              },
              {    "name": "连衣裙",    "parentId": "20210305", "id": '1030405'}, 
              {    "name": "毛呢外套",    "parentId": "20210305", "id": '1030406'}, 
              {    "name": "休闲裤",    "parentId": "20210305", "id": '1030407'}, 
              {    "name": "牛仔外套",    "parentId": "20210305", "id": '1030408'}, 
               {    
                  "name": "围巾",    
                  "parentId": null ,   //父级id
                  "id": '20210306'
              },
            ]
          }
        },
    
        mounted() { 
            let data1 = this.data;//后台初始数据 
            console.log(this.setTreeData(data1))
    
        },
    
        methods: { 
            setTreeData(arr) {                 
                // 删除所有的children,以防止多次调用 
                arr.forEach(function(item) {                    
                 	delete item.children;                
                });                
                let map = { }; //构建map 
                arr.forEach(i => {                     
                  map[i.id] = i; //构建以id为键 当前数据为值 
                });                
                let treeData = [];                
                arr.forEach(child => {                     
                    const mapItem = map[child.parentId]; //判断当前数据的parentId是否存在map中 
                    if (mapItem) {                         
                        //存在则表示当前数据不是最顶层的数据 
                        //注意： 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变，踩坑点 
                        (mapItem.children || (mapItem.children = [])).push(child); //这里判断mapItem中是否存在child 
                        } else {                         //不存在则是顶层数据 
                        treeData.push(child);                    
                        }                
                });                
                return treeData;           
             } 
        },
    
      }
    </script>
    <style scoped>
    
    </style>