Convertir le tableau vue en arborescence-Questions et réponses frontales-php.cn

Convertir le tableau vue en arborescence

王林

Libérer： 2023-05-24 10:42:37

original

648 Les gens l'ont consulté

Vue est un framework frontal populaire dans lequel de nombreuses opérations sont basées sur des tableaux. Lorsque nous devons afficher des données de structure arborescente complexes dans Vue, nous devons convertir le tableau en données de structure arborescente pour faciliter notre affichage et notre fonctionnement sur la page. Cet article présentera la méthode d'implémentation de conversion du tableau Vue en structure arborescente.

Déterminer la structure des données

Avant la conversion, nous devons d'abord déterminer la structure des données que nous voulons convertir. Cet article utilise les données suivantes. structure à titre d'exemple :

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

Copier après la connexion

Où, chaque élément contient un identifiant, un nom et l'identifiant de son élément parent. Cette structure de données peut être utilisée pour représenter une structure arborescente avec une relation parent-enfant.

Implémentation de la méthode de conversion

Ensuite, nous devons implémenter une méthode de conversion. Selon notre structure de données, nous pouvons définir une classe de nœuds :

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

Copier après la connexion

Parmi eux, id, name, parentId représentent l'identifiant, le nom et l'identifiant du nœud parent, et les enfants représentent la collection de nœuds enfants sous le nœud.

Ensuite, nous créons le nœud racine basé sur le tableau d'origine :

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

Copier après la connexion

Dans la méthode buildTree, nous créons d'abord un nœud racine, puis nous parcourons le dataArray pour créez chaque nœud et ajoutez-le à la propriété children de son nœud parent.

La méthode findNode est utilisée pour trouver le nœud avec l'identifiant spécifié Lorsque nous rencontrons le nœud lors d'une boucle, nous l'ajoutons à l'attribut children de son nœud parent.

Résultats des tests

Nous pouvons maintenant tester notre méthode :

let treeData = buildTree(dataArray);

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

Copier après la connexion

Les résultats de sortie sont les suivants : # 🎜 🎜#

[
  {
    "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": []
      }
    ]
  }
]

Copier après la connexion

Nous pouvons voir que nous avons réussi à convertir le tableau d'origine en données de structure arborescente.

Dans Vue, de nombreuses opérations sont indissociables des tableaux. Lorsque nous devons afficher des données de structure arborescente complexe, nous pouvons convertir des tableaux. en données structurées en arborescence. Cet article présente la méthode d'implémentation de conversion d'un tableau Vue en structure arborescente. Tout d'abord, la structure des données est déterminée, puis la méthode de conversion est implémentée, et enfin nous la testons et obtenons le résultat correct. Vous pouvez utiliser cette méthode pour convertir les données de votre tableau Vue afin de les afficher et de les utiliser facilement sur la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!