jsは無限階層ツリー構造を実現する（革新アルゴリズム）

プロジェクトをする必要があるので、線形配列を木の形の配列に変えて、ネットでたくさんの文章を調べました。彼らが書いたのは複雑すぎると思いました。自分で一つ書きました。午後やっとそれを書き上げました。
jsコード：フラットデータをツリーデータに変換する

function setTreeData(source){
  let cloneData = JSON.parse(JSON.stringify(source))   //         
  return cloneData.filter(father=>{           //      ，   children  
    let branchArr = cloneData.filter(child=> father.id == child.parentId);  //           
    branchArr.length>0 ? father.children=branchArr : ''  //       children  ，   
    return father.parentId==0;   //     
  });
}

ネット友達から指摘された問題によって、前のアルゴリズムはソースデータに影響します。その後、取得したデータに対して深さクローンを行いました。完璧に解決しました。
パッケージ関数:

function treeData(source, id, parentId, children){  
  let cloneData = JSON.parse(JSON.stringify(source))
  return cloneData.filter(father=>{
    let branchArr = cloneData.filter(child => father[id] == child[parentId]);
    branchArr.length>0 ? father[children] = branchArr : ''
    return father[parentId] == 0    //        parentId=0，     
  })
}
 
//    ，            ， treeData(source, 'id', 'parentId', 'children')

例1：element-uiのコンポーネントを使って、ツリー形の多段ネスト伸縮メニューバーを作ります。
実現効果:

vueコンポーネント:

<template>
 <el-tree
  :data="treeData"
  :props="defaultProps"
  accordion
  @node-click="handleNodeClick">
 </el-tree>
</template>
 
<script>
  export default {
    name: "Test",
   data(){
    return {
     data : [
      {id:1,parentId:0,name:"    A",rank:1},
      {id:2,parentId:0,name:"    B",rank:1},
      {id:3,parentId:0,name:"    C",rank:1},
      {id:4,parentId:1,name:"    A-A",rank:2},
      {id:5,parentId:1,name:"    A-B",rank:2},
      {id:6,parentId:2,name:"    B-A",rank:2},
      {id:7,parentId:4,name:"    A-A-A",rank:3},
      {id:8,parentId:7,name:"    A-A-A-A",rank:4},
      {id:9,parentId:8,name:"    A-A-A-A-A",rank:5},
      {id:10,parentId:9,name:"    A-A-A-A-A-A",rank:6},
      {id:11,parentId:10,name:"    A-A-A-A-A-A-A",rank:7},
      {id:12,parentId:11,name:"    A-A-A-A-A-A-A-A",rank:8},
      {id:13,parentId:12,name:"    A-A-A-A-A-A-A-A-A",rank:9},
      {id:14,parentId:13,name:"    A-A-A-A-A-A-A-A-A-A",rank:10},
     ],
     defaultProps: {
      children: 'children',
      label: 'name'
     }
    }
   },
   computed:{
    treeData(){
     let cloneData = JSON.parse(JSON.stringify(this.data))  //         
     return cloneData.filter(father=>{        
      let branchArr = cloneData.filter(child=>father.id == child.parentId)  //          
      branchArr.length>0 ? father.children = branchArr : ''  //      ，        children  ，   
      return father.parentId==0;   //     
     });
    }
   },
   methods:{
    handleNodeClick(data){
     // console.log(data)
     console.log(this.treeData)
    }
   },
   mounted(){
   }
  }
</script>
 
<style scoped>
 
</style>

モモ
ツリーデータをフラットデータに変換します。この記事を参照してください。