Tukar tatasusunan vue kepada struktur pokok

Vue ialah rangka kerja bahagian hadapan yang popular di mana banyak operasi adalah berdasarkan tatasusunan. Apabila kami perlu memaparkan data struktur pokok yang kompleks dalam Vue, kami perlu menukar tatasusunan kepada data struktur pokok untuk memudahkan paparan dan operasi kami pada halaman. Artikel ini akan memperkenalkan kaedah pelaksanaan untuk menukar tatasusunan Vue kepada struktur pokok.

1. Tentukan struktur data

Sebelum menukar, kita perlu terlebih dahulu menentukan struktur data yang ingin kita tukar Artikel ini mengambil struktur data berikut sebagai contoh:

let dataArray = [
  { id: 1, name: 'parent1', parentId: 0 },
  { id: 2, name: 'parent2', parentId: 0 },
  { id: 3, name: 'child1', parentId: 1 },
  { id: 4, name: 'child2', parentId: 1 },
  { id: 5, name: 'child3', parentId: 2 },
  { id: 6, name: 'grandchild1', parentId: 3 },
  { id: 7, name: 'grandchild2', parentId: 3 }
];

Di mana, setiap elemen mengandungi id, nama dan id elemen induknya. Struktur data ini boleh digunakan untuk mewakili struktur pokok dengan hubungan ibu bapa-anak.

2. Laksanakan kaedah penukaran

Seterusnya, kita perlu melaksanakan kaedah penukaran. Mengikut struktur data kami, kami boleh mentakrifkan kelas nod:

class Node{
  constructor(data){
    this.id = data.id;
    this.name = data.name;
    this.parentId = data.parentId;
    this.children = [];
  }
}

Antaranya, id, nama dan parentId mewakili id, nama dan id nod induk, dan kanak-kanak mewakili koleksi nod anak. di bawah nod.

Seterusnya, kami mencipta nod akar berdasarkan tatasusunan asal:

function buildTree(dataArray) {
  let root = new Node({ id: 0, name: 'root', parentId: null });
  
  // 循环处理每个节点
  for(let i=0;i<dataArray.length;i++){
      let data = dataArray[i];
      let node = new Node(data);
  
      // 添加到父节点下
      let parent = findNode(root, data.parentId);
      parent.children.push(node);
  }
  return root.children;
}

// 根据id查找节点
function findNode(node, targetId) {
  if (node.id === targetId) {
      return node;
  } else {
      for (let i = 0; i < node.children.length; i++) {
          let result = findNode(node.children[i], targetId);
          if (result !== null) {
              return result;
          }
      }
      return null;
  }
}

Dalam kaedah buildTree, kami mula-mula mencipta nod akar, kemudian kami menggelung melalui dataArray, mencipta setiap nod, dan Ia ditambahkan pada harta anak nod induknya.

Kaedah findNode digunakan untuk mencari nod dengan id yang ditentukan Apabila kami menemui nod semasa menggelung, kami menambahkannya pada atribut anak nod induknya.

3. Keputusan ujian

Kami kini boleh menguji kaedah kami:

let treeData = buildTree(dataArray);

console.log(JSON.stringify(treeData));

Keputusan output adalah seperti berikut:

Kami boleh lihat Pada ketika ini, kami berjaya menukar tatasusunan asal kepada data berstruktur pokok.

4. Ringkasan

Dalam Vue, banyak operasi tidak dapat dipisahkan daripada tatasusunan Apabila kita perlu memaparkan data struktur pokok yang kompleks, kita boleh menukar tatasusunan kepada data Berstruktur pokok. Artikel ini memperkenalkan kaedah pelaksanaan menukar tatasusunan Vue kepada struktur pokok Pertama, struktur data ditentukan, kemudian kaedah penukaran dilaksanakan, dan akhirnya kami mengujinya dan mendapatkan hasil yang betul. Anda boleh menggunakan kaedah ini untuk menukar data tatasusunan Vue anda untuk paparan dan pengendalian yang mudah pada halaman.

Atas ialah kandungan terperinci Tukar tatasusunan vue kepada struktur pokok. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!