Comment construire efficacement un arbre à partir d'une structure arborescente

Question

J'ai un tas d'objets dans une structure arborescente. Mais actuellement cette structure ne fonctionne pas pour moi car j'ai besoin d'utiliser v-teeview donc je dois le restructurer...

Mon arborescence ressemble actuellement à ceci :

items: [
  {
    data: [
      { ... },
    ],
    children: [],
  },
  {
    data: [{ ... }],
    children: [{...}, {...}]
   }
] 

Je dois réorganiser quelque chose comme ceci :

  items: [
      {     
         id: 76,
         name: "ADIS ",
         children: [],
      },
      {
        id: 64,
        name: "YSVERIS",
        children: [
          {
            id: 85,
            name: "MERCEDES",
            children: [],
          },
          {
            id: 83,
            name: "YNGRIBEL",  
            children: [],
          },
        ],
      }
    ]

J'ai donc implémenté une fonction récursive pour reconstruire l'arbre.

Codes dans

codesandbox :

export default {
  methods: {
    createTree(items) {
      items.forEach((element) => {
        if (element.children.length === 0) {
          this.datatree.push({
            id: element.data[0].id,
            name: element.data[0].name,
            children: [],
          });
        } else {
          this.datatree.push({
            id: element.data[0].id,
            name: element.data[0].name,
            children: this.createTree(element.children),
          });
        }
      });
      console.log("root: ", this.datatree);
    },
  },
  mounted() {
    this.createTree(this.items);
  },
}

Donc mon problème actuel est que lorsque je construis un nouvel arbre, ses sous-arbres ne sont pas définis, qu'est-ce que je fais de mal ?

Dans mon exemple de code, j'utilise console.log() pour voir le nouvel arbre

Answer 1

createTree() 不返回任何内容，因此将返回值分配给 children 只会使 children 具有 undefined Valeur.

Une solution consiste à appeler récursivement une méthode d'assistance (par exemple nommée "createNode”），该方法从每个数组元素创建树节点（而不是递归调用 createTree()）。返回createTree()的结果，并将返回值赋给datatree :

function createTree(items) {
  const createNode = ({ data, children }) => ({
    ...data[0],
    children: children?.map(child => createNode(child))
  })
  return items.map(item => createNode(item))
}

// MyComponent.vue
export default {
  mounted() {
    this.datatree = createTree(this.items)
  }
}

Démo