Zusammenfassung der Wissenspunkte der Vue+Element-Baumkomponente (Tree Control Data Format).

Was dieser Artikel Ihnen bringt, ist eine Zusammenfassung der Wissenspunkte über die Vue+Element-Baumkomponente (Baumkontrolldatenformat). Ich hoffe, dass er für Freunde in Not hilfreich ist du hilfst.

Ich habe kürzlich die erste Komponente erstellt, die in der Gruppe verwendet werden kann. Obwohl es die einfachste Version ist, war es auch sehr aufwändig. Senioren haben mir geholfen, das Problem zu lösen, und ich habe es geschafft, es zu erledigen. Lassen Sie mich den Schreibprozess dieser Baumkomponente und die dabei verwendeten Wissenspunkte aufzeichnen.

Lassen Sie uns zunächst über die Anforderungen sprechen, nämlich auf ein Popup-Fenster + eine Maske. Der Inhalt des Popup-Fensters ist natürlich eine Baumkomponente Legen Sie im Popup-Fenster fest, ob das standardmäßig ausgewählte Mehrfachauswahlfeld angezeigt und Knoten nach Schlüsselwörtern gefiltert werden sollen ( Element ist im Lieferumfang enthalten). Mehrere häufig verwendete Funktionen wurden versiegelt und werden später hinzugefügt, wenn sie für andere Zwecke verwendet werden Zwecke. Alles gelöst)

Heute werden wir zuerst das Problem der Datenverarbeitung aufzeichnen

Nach der Kommunikation mit dem Backend haben wir erfahren, dass wir solche Daten über die Schnittstelle erhalten:

[
            { 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' },
        ]

Und wir überprüfen das Element Das Dokument wird sehen, dass das Datenformat, in dem Sie ihr Plug-in verwenden möchten, so ist

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

Dann müssen wir zuerst den JS-Code schreiben

// Schleifen Sie den übergeordneten Knoten aus

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")//这样调用就好使了

Die vier mit der obigen Funktion verbundenen Werte sind alle Daten-ID, der Feldname der ID, PID, der Feldname der übergeordneten Klassen-ID und der Feldname des Inhalts (da das übergebene Feld nicht unbedingt ID oder PID-Beschriftung heißt und daher flexibel ist)

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

Wenn diese Funktion alleine ohne Rückruf herausgenommen wird, besteht ihre Funktion darin, dass Sie sie übergeben Ein Array, das aus übergeordneten Elementen besteht, und die direkten untergeordneten Elemente jedes übergeordneten Elements werden in das untergeordnete Feld des übergeordneten Elements verschoben, sodass wir nur das Array der neu generierten untergeordneten Elemente als übergeordnetes Elementarray behandeln müssen Beim nächsten Aufruf wird diese Funktion weiter vertieft

Verwandte Empfehlungen:

PHP unendliche Klassifizierungsbaumdatenformatierung

Zusammenfassung der YiiFramework-Wissenspunkte für Einsteiger (grafisches Tutorial), YiiFramework-Wissenspunkte

Das obige ist der detaillierte Inhalt vonZusammenfassung der Wissenspunkte der Vue+Element-Baumkomponente (Tree Control Data Format).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!