Konvertieren Sie das Vue-Array in eine Baumstruktur

Vue ist ein beliebtes Front-End-Framework, in dem viele Operationen auf Arrays basieren. Wenn wir komplexe Baumstrukturdaten in Vue anzeigen müssen, müssen wir das Array in Baumstrukturdaten konvertieren, um unsere Anzeige und Bedienung auf der Seite zu erleichtern. In diesem Artikel wird die Implementierungsmethode zum Konvertieren eines Vue-Arrays in eine Baumstruktur vorgestellt.

1. Bestimmen Sie die Datenstruktur

Bevor wir die Konvertierung durchführen, müssen wir zunächst die Datenstruktur bestimmen, die wir konvertieren möchten. In diesem Artikel wird die folgende Datenstruktur als Beispiel verwendet:

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 }
];

Unter diesen enthält jedes Element eine ID , Name und die ID seines übergeordneten Elements. Diese Datenstruktur kann zur Darstellung einer Baumstruktur mit einer Eltern-Kind-Beziehung verwendet werden.

2. Implementierung der Konvertierungsmethode

Als nächstes müssen wir eine Konvertierungsmethode implementieren. Gemäß unserer Datenstruktur können wir eine Knotenklasse definieren:

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

Unter diesen stellen ID, Name und ParentId die ID, den Namen und die ID des übergeordneten Knotens des Knotens dar, und Kinder repräsentieren die Sammlung untergeordneter Knoten unter dem Knoten .

Als nächstes erstellen wir den Wurzelknoten basierend auf dem ursprünglichen Array:

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

In der buildTree-Methode erstellen wir zuerst einen Wurzelknoten, dann durchlaufen wir das dataArray, erstellen jeden Knoten und fügen ihn den untergeordneten Knoten seines übergeordneten Knotens hinzu Knoten in Eigenschaften.

Die findNode-Methode wird verwendet, um den Knoten mit der angegebenen ID zu finden. Wenn wir während der Schleife auf den Knoten stoßen, fügen wir ihn dem Kinderattribut seines übergeordneten Knotens hinzu.

3. Testergebnisse

Wir können jetzt unsere Methode testen:

let treeData = buildTree(dataArray);

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

Die Ausgabeergebnisse lauten wie folgt:

[
  {
    "id": 1,
    "name": "parent1",
    "parentId": 0,
    "children": [
      {
        "id": 3,
        "name": "child1",
        "parentId": 1,
        "children": [
          {
            "id": 6,
            "name": "grandchild1",
            "parentId": 3,
            "children": []
          },
          {
            "id": 7,
            "name": "grandchild2",
            "parentId": 3,
            "children": []
          }
        ]
      },
      {
        "id": 4,
        "name": "child2",
        "parentId": 1,
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "parent2",
    "parentId": 0,
    "children": [
      {
        "id": 5,
        "name": "child3",
        "parentId": 2,
        "children": []
      }
    ]
  }
]

Wir können sehen, dass wir das ursprüngliche Array erfolgreich in baumstrukturierte Daten konvertiert haben.

4. Zusammenfassung

In Vue sind viele Operationen untrennbar mit Arrays verbunden. Wenn wir komplexe Baumstrukturdaten anzeigen müssen, können wir das Array in Baumstrukturdaten konvertieren. In diesem Artikel wird die Implementierungsmethode zum Konvertieren eines Vue-Arrays in eine Baumstruktur vorgestellt. Zuerst wird die Datenstruktur bestimmt, dann wird die Konvertierungsmethode implementiert und schließlich testen wir sie und erhalten das richtige Ergebnis. Mit dieser Methode können Sie Ihre Vue-Array-Daten für eine einfache Anzeige und Bedienung auf der Seite konvertieren.

Das obige ist der detaillierte Inhalt vonKonvertieren Sie das Vue-Array in eine Baumstruktur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!