Bagaimana untuk membina pokok dengan cekap daripada struktur pokok

Question

Saya mempunyai sekumpulan objek dalam struktur pokok. Tetapi pada masa ini struktur ini tidak berfungsi untuk saya kerana saya perlu menggunakan v-teeview jadi saya perlu menstrukturkannya semula...

Struktur pokok saya pada masa ini kelihatan seperti ini:

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

Saya perlu menyusun semula sesuatu seperti ini:

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

Jadi, saya melaksanakan fungsi rekursif untuk membina semula pokok itu.

Kod dalam

kodkotak pasir:

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

Jadi masalah saya sekarang ialah apabila saya membina pokok baru, subpokoknya tidak ditentukan, apakah salah saya?

Dalam kod contoh saya, saya menggunakan console.log() untuk melihat pokok baharu

Answer 1

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

Satu penyelesaian adalah dengan memanggil kaedah pembantu secara rekursif (cth. bernama "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)
  }
}

Demo