js 平级数据转换为树桩结构递归

你好小同志

于 2022-08-22 21:50:59 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/wangkangyang/article/details/126474411

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 Vue.js 通过递归方法构建动态数据结构，并展示在组件中。通过 `makedata` 和 `makethree` 函数，实现从原始数据到层次结构的转换，适合理解组件间父子关系的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      {{newArray}}
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
   
  },
  data () { 
    return { 
      array : [
       {  id : 1 },
       {  parentId : 1 ,id :2   },
       {  id : 3 },
       {  parentId : 3 ,  id : 4 },
       {  parentId : 4 ,id : 5 },
       {  parentId : 5 ,id : 6 },
       {  parentId : 6 ,id : 7 },
      ],
      newArray : [
        // {  id : 1 , children :[]},
        // {  id : 3 , children :[]} 
      ],
    }
  },
  created () {
    this.makedata()
  },
  methods : { 
     makedata (){ 
       this.array.forEach( item1=> { 
        // console.log(Object.keys(item1).length);
          if (Object.keys(item1).length=='1') {
            this.newArray.push({ id : item1.id , children :[]})
          }
       })
       this.makethree( this.newArray)
     },
    makethree( data ){ 
     data.forEach( item => { 
        this.array.forEach ( item1 => { 
             if (item.id == item1.parentId) {
             item.children.push({...item1 , children : []})
              this.makethree( item.children)
          }
        })
       })
     },

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>