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

C# implementiert MySQL-Befehlszeilensicherung und -wiederherstellung

Es gibt viele Tools zum Sichern von MySQL-Datenba...

Umgang mit Leerzeichen in CSS

1. Weltraumregeln Leerzeichen im HTML-Code werden...

Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Um es gleich auf den Punkt zu bringen: Bei manche...

So erstellen Sie einen MySQL PXC-Cluster

Inhaltsverzeichnis 1. Einführung in PXC 1.1 Einfü...

Lernen Sie, wie Sie Uniapps und Miniprogramme (Bilder und Text) untervergeben

Inhaltsverzeichnis 1. Subunternehmer für Miniprog...

Beispiel-Tutorial zur Verwendung der Summenfunktion in MySQL

Einführung Heute werde ich die Verwendung der Sum...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12

Notieren Sie die Installations- und Konfiguration...

Implementierung des Whack-a-Mole-Spiels in JavaScript

In diesem Artikel finden Sie den spezifischen Cod...

Aufbau der Angular-Umgebung und einfache Erfahrungszusammenfassung

Einführung in Angular Angular ist ein von Google ...

Vue implementiert eine einfache bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Co...