ElementUI implementiert kaskadierenden Selektor

ElementUI implementiert kaskadierenden Selektor

In diesem Artikelbeispiel wird der spezifische Code von elementUI zur Implementierung des Kaskadenselektors zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Rufen Sie die Schnittstelle vom Backend auf und übergeben Sie die Daten an das Frontend

2. Verwenden Sie VUE-Code, um kaskadierende Optionen anzuzeigen

<el-Kaskade
        :disabled="istDeaktiviert"
        :props="Standardparameter"
        :Optionen="Optionen"
        v-Modell="ausgewählteOptionen"
        :alle-Ebenen-anzeigen="false"
        filterbar
        :löschbar="wahr"
      ></el-cascader>

3. JS definieren

Daten() {
   Optionen: [],
      ausgewählteOptionen: [],
      Standardparameter: {
        Bezeichnung: "Name",
        Wert: "Code",
        Kinder: "Kinder",
      },
},
erstellt() {
 listArea(330000).dann((Antwort) => {
       console.log(Antwort);
       diese.Optionen = diese.getTreeData(Antwort);
       dies.laden = falsch;
     });
},
Methoden: {
 // Leere Arrays rekursiv eliminieren getTreeData(data) {
      // Schleife durch JSON-Daten für (var i = 0; i < data.length; i++) {
        wenn (Daten[i].Kinder.Länge < 1) {
          //Wenn children ein leeres Array ist, setze children auf undefiniert
          Daten[i].Kinder = undefiniert;
        } anders {
          // Wenn „children“ kein leeres Array ist, rufen Sie diese Methode weiterhin rekursiv auf. this.getTreeData(data[i].children);
        }
      }
      Daten zurückgeben;
    }
}

4. Der Anzeigeeffekt ist wie folgt

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Praxis des El-Cascader-Kaskadenselektors in ElementUI
  • Lösung für den Kaskadenselektor-Fehler in Vue+ElementUI

<<:  So verwenden Sie IDEA, um ein Webprojekt zu erstellen und es auf Tomcat zu veröffentlichen

>>:  Warum der Speicherplatz nach dem Löschen von Daten in MySQL nicht freigegeben wird

Artikel empfehlen

Grundprinzipien des skalierbaren MySQL-Designs

Inhaltsverzeichnis Vorwort 1. Was ist Skalierbark...

Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur

Der Zweck der Verwendung von HTML zum Markieren v...

9 superpraktische CSS-Tipps, die Designern und Entwicklern helfen

Im Kopf eines Webdesigners muss viel Wissen im Zus...

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Was ist JConsole JConsole wurde in Java 5 eingefü...

Hintergrundbild-Cache unter IE6

Fehler beim Flackern des CSS-Hintergrundbilds in ...

Wie stellt MySQL die Datenintegrität sicher?

Die Bedeutung von Datenkonsistenz und -integrität...

Import-, Export-, Sicherungs- und Migrationsvorgänge für Docker-Images

Export: docker save -o centos.tar centos:latest #...

11 Gründe, warum Bootstrap so beliebt ist

Vorwort Bootstrap, das beliebteste Front-End-Entw...

CentOS 7 erstellt Hadoop 2.10 mit hoher Verfügbarkeit (HA)

Dieser Artikel beschreibt, wie man einen hochverf...

Beispiel zum Ändern der inländischen Quelle in Ubuntu 18.04

Die eigene Quelle von Ubuntu stammt aus China, da...