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

Top 10 der nützlichsten und wichtigsten Open-Source-Tools im Jahr 2019

In der Open-Source-Umfrage von Black Duck aus dem...

HTML+CSS zum Erstellen eines einfachen Fortschrittsbalkens

1. HTML-Code Code kopieren Der Code lautet wie fo...

Eine kurze Diskussion über einige Vorteile von Vue3

Inhaltsverzeichnis 1. Quellcode 1.1 Monorepo 1.2 ...

Implementierung der Benutzerregistrierungsfunktion mit js

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Vorwort Bei der Projektfreigabe ist immer eine Ve...

Element Plus implementiert Affix

Inhaltsverzeichnis 1. Komponenteneinführung 2. Qu...

Einfaches HTML-Applet für Einkaufsmengen

Dieser Artikel stellt Ihnen ein einfaches HTML-Ap...

MySQL zeigt ein einfaches Operationsbeispiel

Dieser Artikel beschreibt den MySQL-Show-Vorgang ...

Schritte zum Upgrade von CentOS6 auf Glibc

Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...

Funktionsüberladung in TypeScript

Inhaltsverzeichnis 1. Funktionssignatur 2. Funkti...