Wie man aus einer Baumstruktur effizient einen Baum baut

Question

Ich habe eine Reihe von Objekten in einer Baumstruktur. Aber derzeit funktioniert diese Struktur bei mir nicht, weil ich v-teeview verwenden muss, also muss ich sie umstrukturieren...

Meine Baumstruktur sieht derzeit so aus:

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

Ich muss so etwas neu organisieren:

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

Also habe ich eine rekursive Funktion implementiert, um den Baum zu rekonstruieren.

Codes in

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);
  },
}

Mein aktuelles Problem ist also, dass beim Erstellen eines neuen Baums dessen Unterbäume undefiniert sind. Was mache ich falsch?

In meinem Beispielcode verwende ich console.log(), um den neuen Baum anzuzeigen

Answer 1

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

一种解决方案是递归调用辅助方法（例如，名为“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)
  }
}

演示