Beispielcode zur Implementierung einer Mehrfachauswahl basierend auf einer verschachtelten Tabelle in ElementUI

Vorwort:

Ich habe das geschrieben, weil ich meinem Freund geholfen habe, einen Fehler in seinem Projekt zu beheben.
Dies ist das erste Mal, dass ich diese Funktion schreibe. Wenn Fehler vorhanden sind, hoffe ich, dass Sie mich korrigieren können. Wenn Sie es hilfreich finden, geben Sie mir bitte einen Daumen hoch!
Der Schlüssel im Code ist der Kern der Pfadsuche von Tree in js. Wenn Sie ihn nicht verstehen, können Sie Baidu selbst durchsuchen. Wenn Sie ihn benötigen, können Sie mir eine private Nachricht senden, um nach dem Code zu fragen und zu sehen, wie ich ihn implementiert habe.

Ideen:

Wenn wir diese Anforderung von Anfang an betrachten, müssen wir wissen, wo wir Dinge schreiben müssen.

1. Tabelle
2. Mehrfachauswahl & Alles auswählen
3. Verschachtelte Daten (Dropdown-Operation)

Gerade noch rechtzeitig finden wir die offizielle Dokumentation von ElementUI

Wir haben die API gefunden, die wir brauchen

• Beim Verschachteln von Daten müssen Sie Tree-Props verwenden
• Verwenden Sie „toggleRowSelection“ beim Auswählen von Daten

Grundsätzlich können Sie mit der Nutzung der oben genannten Funktionen beginnen.

erreichen:

Basierend auf dem oben Gesagten können wir die HTML-Struktur schreiben

<Vorlage>
 <div>
  <el-Tabelle
   ref="mehrereTabelle"
   :data="Tabellendaten"
   Stil = "Breite: 100 %; Rand unten: 20 Pixel"
   Zeilenschlüssel="id"
   Grenze
   Standardmäßig alles erweitern
   :Auswählen bei unbestimmtem Wert="true"
   :tree-props="{ Kinder: 'Kinder', hatKinder: 'hatKinder' }"
   @select="Zeilenauswahl"
   @select-all="Alles auswählen"
  >
   <el-table-column Typ="Auswahl" Breite="55"> </el-table-column>
   <el-table-column prop="date" label="Datum" width="180"> </el-table-column>
   <el-table-column prop="name" label="Tabelle" width="180"> </el-table-column>
   <el-table-column prop="address" label="Adresse"></el-table-column>
  </el-Tabelle>
 </div>
</Vorlage>

Die Mehrfachauswahl des Formulars kann in zwei Elemente unterteilt werden: 1 ist eine positive Auswahl, d. h. wenn der Checkout wahr ist, 2 ist eine umgekehrte Stornierung, d. h. wenn der Checkout falsch ist. Anschließend werde ich analysieren, wie diese positive Auswahl und umgekehrte Stornierung implementiert werden.

1. Positive Selektion

Angenommen, ich habe Daten wie die folgenden:
Wenn wir auf einen untergeordneten Knoten klicken, müssen wir gleichzeitig den übergeordneten Knoten und den Stammknoten des untergeordneten Knotens auswählen.
Stammknoten-übergeordneter Knoten-untergeordneter Knoten
Abbildung 2 zeigt die in meinen Daten deklarierten Daten, einschließlich der Frage, ob isChecked ausgewählt ist und ob children untergeordnete Knoten hat.

Nachdem wir nun eine klare Vorstellung davon haben, was wir wählen sollen, stellt sich die Frage: Wie setzen wir es um?

Wenn ich auf einen untergeordneten Knoten klicke, muss ich den übergeordneten Knoten des untergeordneten Knotens bis hin zum Stammknoten aufzeichnen. Daher verwenden wir das Konzept von Tree

Der folgende Code verwendet die Idee des Tree Backtracking. Die Pfadsuche verwendet Pre-Order Traversal, da Sie nicht sicher sind, auf welchem ​​Teilbaum sich der angeklickte untergeordnete Knoten befindet.
Bitte durchsuchen Sie Baidu nach der spezifischen Idee der Tree-Methode.

treeFindPath(Baum, Funktion, Pfad = []) {
   wenn (!Baum) return [];
   für (const Daten des Baums) {
    Pfad.push(Daten);
    wenn (func(data)) Rückgabepfad;
    wenn (Daten.Kinder) {
     const findChildren = this.treeFindPath(data.children, func, path);
     wenn (findChildren.length) returniere findChildren;
    }
    Pfad.pop();
   }
   zurückkehren [];
  },

Wenn wir den obigen Code aufrufen und die Knoten-ID übergeben, wird ein Array zurückgegeben, das die Objekte auf seinem Pfad enthält. Auf diese Weise können wir das Array durchlaufen und die Methode „toggleRowSelection“ verwenden, um den Seitenstatusstil zu ändern.

2. Stornierung rückgängig machen

Die umgekehrte Stornierung ist genau das Gegenteil der Auswahl. Wenn wir zum Abbrechen auf einen untergeordneten Knoten klicken, müssen wir feststellen, ob alle Knoten auf derselben Ebene abgebrochen wurden. Wenn alle Knoten abgebrochen wurden, müssen wir den übergeordneten Knoten dieses Knotens in den abgebrochenen Zustand ändern und dann prüfen, ob sich alle Knoten auf derselben Ebene seines übergeordneten Knotens im abgebrochenen Zustand befinden. Wenn immer noch ein abgebrochener Zustand vorliegt, suchen Sie weiter auf dieselbe Weise wie zuvor nach seinem übergeordneten Knoten, bis die Bedingung nicht mehr erfüllt ist, und verlassen Sie die Schleife.

Ein einfaches schematisches Diagramm

Wenn Sie auf Knoten 4 klicken, wird geprüft, ob sich die Knoten 5 und 6 auf derselben Ebene im abgebrochenen Zustand befinden. Wenn sie sich beide im abgebrochenen Zustand befinden, prüfen Sie ihren übergeordneten Knoten 2, ändern Sie 2 in „false“ und prüfen Sie dann, ob der Knoten 3 auf derselben Ebene von 2 abgebrochen ist. Wenn er abgebrochen ist, prüfen Sie 1
Wenn dieselbe Ebene ausgewählt ist, wird direkt aus der Schleife gesprungen, ohne den nächsten Schritt auszuführen

Unten sehen Sie den Code zum Deaktivieren

Verwenden Sie weiterhin den Tree-Code und führen Sie eine reverse()-Operation für das erhaltene Array aus. Die erste Schleife beginnt mit dem Klicken auf den Knoten und durchsucht das Internet. Hier wird eine for-Schleife verwendet. Wenn diese nicht erfüllt ist, wird die nachfolgende Schleife direkt beendet.

3. Alles auswählen

Ich habe das Gefühl, dass ich hier etwas zu viel schreibe.
Wenn ich alles auswähle, stelle ich zunächst rekursiv fest, ob in den Daten ungeprüfte Daten über isChecked vorhanden sind. Wenn ungeprüfte Daten vorhanden sind, ändere ich isChecked in allen Daten rekursiv auf true. Wenn alles ausgewählt ist, ändere ich es rekursiv auf false.

Nachfolgend finden Sie alle ausgewählten Codes

  /**
   * @describe alles auswählen*/
  wähleAlles(Auswahl) {
   konsole.log(Auswahl);
   let isAllCheck = this.selectAllRecursion(this.tableData);
   // Ob aa falsch ist, zeigt an, ob es aktiviert ist oder nicht. this.checkoutAll(this.tableData, !isAllCheck);
  },
  /**
   * @describe prüft rekursiv, ob isChecked wahr ist, false bedeutet, dass es nicht aktiviert ist*/
  wähleAlleRekursion(arr) {
   sei isCheck = true;
   Funktion istRekursion(arr) {
    arr.fürEach((Artikel) => {
     wenn (!item.isChecked) {
      istCheck = falsch;
      wenn (Element.Kinder) {
       istRecursion(item.children);
      }
     }
    });
   }
   istRekursion(arr);
   gibt isCheck zurück;
  },
  /**
   * @describe Ändere alle Werte auf true oder false
   */
  KasseAlle(arr, boole) {
   var _this = dies;
   Funktion allCheck(arr, boole) {
    arr.fürEach((Artikel) => {
     item.isChecked = boolesch;
     _this.$refs.multipleTable.toggleRowSelection(item, boolesches);
     wenn (Element.Kinder) {
      allCheck(item.children, boolesches);
     }
    });
   }
   allCheck(arr, boolesches);
  },

ENDE:

Der grundlegende Code ist wie oben, mit Ausnahme der Tabellen-Paging-Funktion

Damit ist dieser Artikel über den Beispielcode zur Implementierung von Mehrfachauswahlen basierend auf verschachtelten Tabellen in ElementUI abgeschlossen. Weitere Informationen zu verschachtelten Mehrfachauswahlen in ElementUI-Tabellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!