Résumé des points de connaissance du composant vue+element tree (format de données de contrôle d'arbre)

Ce que cet article vous apporte est un résumé des points de connaissances sur le composant vue+element tree (format de données de contrôle d'arbre). Il a une certaine valeur de référence. J'espère que cela sera utile. vous. aider.

J'ai récemment créé le premier composant pouvant être utilisé en groupe. Bien qu'il s'agisse de la version la plus simple, cela a également demandé beaucoup d'efforts. Les seniors m’ont aidé à résoudre le problème et j’ai réussi à y parvenir. Permettez-moi d'enregistrer le processus d'écriture de ce composant d'arborescence et les points de connaissances utilisés au cours du processus.

Tout d'abord, parlons des exigences, qui sont de cliquer sur une fenêtre pop-up + un masque. Le contenu de la fenêtre pop-up est un composant arborescent. Bien sûr, quelle est la taille de. la fenêtre pop-up, s'il faut afficher la boîte de sélection multiple, sélectionnée par défaut, et filtrer les nœuds par mots-clés (Element est livré avec) Plusieurs fonctions couramment utilisées ont été scellées, et seront ajoutées ultérieurement lorsqu'elles seront utilisées pour d'autres fins. Tout est résolu)

Aujourd'hui, nous allons d'abord enregistrer le problème du traitement des données

Après avoir communiqué avec le backend, nous avons appris que nous obtiendrons ces données via l'interface :

[
            { id: '01', label: '测试活动', pId: '1' },
            { id: '011', label: '测试活动1', pId: '01' },
            { id: '012', label: '测试活动2', pId: '01' },
            { id: '02', label: '测试活动3', pId: '1' },
            { id: '021', label: '测试活动4', pId: '02' },
            { id: '022', label: '测试活动5', pId: '02' },
            { id: '0221', label: '测试活动6', pId: '022' },
            { id: '0222', label: '测试活动7', pId: '022' },
            { id: '0223', label: '测试活动6', pId: '022' },
            { id: '0224', label: '测试活动7', pId: '022' },
            { id: '0225', label: '测试活动6', pId: '022' },
            { id: '0226', label: '测试活动7', pId: '022' },
        ]

Et nous vérifions Dans le document de l'élément, vous verrez que le format de données que vous souhaitez utiliser leur plug-in est comme celui-ci

    [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }]

Ensuite, nous devons traiter les données. Tout d'abord, entrez le js. code

// Bouclez le nœud parent

export function toTreeData(data,id,pid,name) {
// 建立个树形结构,需要定义个最顶层的父节点，pId是1
    let parent = [];
    for (let i = 0; i < data.length; i++) {

        if(data[i][pid] !== "1"){
        }else{
          let obj = {
            label: data[i][name],
            id: data[i][id],
            children: []
          };
          parent.push(obj);//数组加数组值
        }
        // console.log(obj);
        //  console.log(parent,"bnm");

    }
    children(parent);

// 调用子节点方法,参数为父节点的数组
function children(parent) {
console.log(parent)
      if (data.length !== 0) {
        for (let i = 0; i < parent.length; i++) {
          for (let j = 0; j < data.length; j++) {
            if (parent[i].id == data[j][pid]){
              let obj = {
                label: data[j][name],
                id: data[j][id],
                children: []
              };
              parent[i].children.push(obj);
            }
          }
          children(parent[i].children);
        }
      }
    }
    console.log(parent,"bjil")
    return parent;
  }
  toTreeData(this.data,"id","pid","label")//这样调用就好使了

Les quatre valeurs connectées à la fonction ci-dessus sont les données, toutes les données id, le nom du champ id, le pid, le champ le nom de l'identifiant de la classe parent et le nom du champ du contenu (car le champ passé ne s'appelle pas nécessairement id L'étiquette pid est tellement flexible)

  toTreeData(this.data,"id","pid","label")//这样调用就好使了
  //这个回调函数作用当然是转换数组的格式

Lorsque cette fonction est retirée seule sans rappel, sa fonction est que vous transmettez un tableau composé d'éléments parents, et il compressera les éléments enfants directs de chaque élément parent dans le champ enfants de l'élément parent, de sorte que nous n'ayons besoin que du tableau d'éléments enfants nouvellement générés. comme tableau d'éléments parent pour le prochain appel. Appelez cette fonction et elle continuera à approfondir

Recommandations associées :

formatage des données de l'arbre de classification infinie php

Résumé des points de connaissances d'entrée de gamme YiiFramework (tutoriel graphique), points de connaissances yiiframework

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!