Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

In der Frontend-Entwicklung werden häufig kaskadierende Auswahlfelder verwendet, was nicht nur die Benutzerfreundlichkeit der Benutzereingabe erhöht, sondern auch die Menge der zwischen Frontend und Backend interagierenden Daten reduziert. In diesem Artikel wird elementUI als Beispiel verwendet. Die allgemeine Idee bei der Verwendung anderer UI-Komponenten ist dieselbe.

1. Datenbankdesign

Alle zusammengehörenden Daten können in einer Tabelle gespeichert werden, so dass die Daten nicht durch eine Hierarchie eingeschränkt sind.

Die Tabellenstruktur kann sich auf das folgende SQL zur Tabellenerstellung beziehen:

CREATE TABLE `supplies_type` (
  `id` int(11) NICHT NULL AUTO_INCREMENT,
  `category_type` varchar(64) NOT NULL COMMENT 'Kategorietyp: große Kategorie, mittlere Kategorie, kleine Kategorie',
  `big_category_name` varchar(64) NOT NULL COMMENT 'Großer Kategoriename',
  `middle_category_name` varchar(64) DEFAULT NULL COMMENT 'Name der mittleren Kategorie',
  `small_category_name` varchar(64) DEFAULT NULL COMMENT 'Kleiner Kategoriename',
  `parent_id` int(11) DEFAULT NULL,
  `create_time` Zeitstempel NULL DEFAULT CURRENT_TIMESTAMP,
  `create_user_name` varchar(64) DEFAULT NULL COMMENT 'Benutzernamen erstellen',
  `update_time` Zeitstempel NULL DEFAULT NULL BEI UPDATE CURRENT_TIMESTAMP,
  `is_deleted` tinyint(1) DEFAULT '0' COMMENT 'Ob es gelöscht ist, 1 bedeutet, dass es gelöscht ist',
  PRIMÄRSCHLÜSSEL (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

Der Screenshot der Datenbank ist in der folgenden Abbildung dargestellt. Hinweis: Um die Anzahl der Abfragen zu reduzieren, verfügt dieses System über redundante Felder. Leser können sie nach ihren Bedürfnissen anpassen.

Bildbeschreibung hier einfügen

Der Kern des Entwurfs liegt in parent_id. Unterklassen können basierend auf dem Feld parent_id abgefragt werden. Das Ergebnis ist in der folgenden Abbildung dargestellt:

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

2. Frontend-Seite

Der Front-End-Seiteneffekt ist wie folgt:

Bildbeschreibung hier einfügen

Der HTML-Code lautet wie folgt:

<div Klasse="App-Container">
    <span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">Hauptkategorien:</span>
    <el-select v-model="big" placeholder="Bitte auswählen" @change="getSuppliesType(big)" style="width: 19%;">
      <el-Option
        v-for="Element in großen Typen"
        :Schlüssel="Artikel.großerKategoriename"
        :label="Artikel.großerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <span style="margin-left:120px;margin-right: 20px; width: 150px;display: inline-block;">Mittlere Kategorie:</span>
    <el-select v-model="middle" placeholder="Bitte auswählen" @change="getSuppliesType(middle)" style="width: 19%;">
      <el-Option
        v-for="Element in mittleren Typen"
        :Schlüssel="Artikel.mittlererKategoriename"
        :label="Artikel.mittlererKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <br>
    <br>
    <br>
    <span style="margin-left:120px;margin-right: 20px;width: 150px; margin-top:20px; display: inline-block;">Unterkategorie:</span>
    <el-select v-model="small" placeholder="Bitte wählen" style="width: 19%;">
      <el-Option
        v-for="Element in kleinen Typen"
        :Schlüssel="Artikel.smallCategoryName"
        :label="Artikel.kleinerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
</div>

Die obigen Daten item.smallCategoryName und item.smallCategoryName sind die Daten (Camel Case-Namensgebung), die vom Backend aus der Datenbank abgefragt werden. Das Backend ist nur für die Abfrage und Rückgabe der Ergebnisse verantwortlich.

Die Datendefinition in Vue lautet wie folgt:

Daten() {
    zurückkehren {
        groß: '',
        großeTypen: null,
        Mitte: '',
        mittlereTypen: null,
        klein: '',
        smallTypes: null
    }
},

Beim Initialisieren der Seite wird die Kategorienliste automatisch abgerufen:

erstellt() {
		this.getSuppliesType(0)
},

Die Methode getSuppliesType auf der Seite lautet wie folgt:

getSuppliesType(id) {
  this.listLoading = wahr
  const queryData = {
    übergeordneteID: ID
  }
  //Der Aufruf der Backend-Schnittstelle kann hier entsprechend Ihrer eigenen Aufrufmethode geschrieben werden //Der getSuppliersType ist hier die Methode im Util, die im Projekt gekapselt ist //Wenn die Anforderungsmethode „Post“ ist, JSON.stringify(queryData)
  //Wenn die Anforderungsmethode get ist, queryData
  getSuppliersType(JSON.stringify(queryData)).then(response => {
    console.log(Antwort)
    Konsole.log(Antwort.Daten[0].Kategorietyp)
    //Den drei Dropdown-Feldern automatisch Werte entsprechend dem Typ zuweisen if (response.data[0].categoryType === 'BIG') {
      dies.bigTypes = antwort.daten
    } sonst wenn (response.data[0].categoryType === 'MIDDLE') {
      this.middleTypes = Antwort.Daten
    } anders {
      diese.smallTypes = Antwort.Daten
    }
    this.listLoading = falsch
  }).catch(Funktion (Fehler) {
    console.log(Fehler)
    this.listLoading = falsch
  })
},

3. Eine vollständige Demo

Die folgende Seite ist der vollständige Code. Die darin enthaltenen Daten sind Teildaten und die Hintergrundschnittstelle wird mithilfe von JS abgerufen.

<Vorlage>
  <div Klasse="App-Container">
    <span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">Hauptkategorien:</span>
    <el-select v-model="big" placeholder="Bitte auswählen" @change="getSuppliesType(big)" style="width: 19%;">
      <el-Option
        v-for="Element in großen Typen"
        :Schlüssel="Artikel.großerKategoriename"
        :label="Artikel.großerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <span style="margin-left:120px;margin-right: 20px; width: 150px;display: inline-block;">Mittlere Kategorie:</span>
    <el-select v-model="middle" placeholder="Bitte auswählen" @change="getSuppliesType(middle)" style="width: 19%;">
      <el-Option
        v-for="Element in mittleren Typen"
        :Schlüssel="Artikel.mittlererKategoriename"
        :label="Artikel.mittlererKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <br>
    <br>
    <br>
    <span style="margin-left:120px;margin-right: 20px;width: 150px; margin-top:20px; display: inline-block;">Unterkategorie:</span>
    <el-select v-model="small" placeholder="Bitte auswählen" style="width: 19%;">
      <el-Option
        v-for="Element in kleinen Typen"
        :Schlüssel="Artikel.smallCategoryName"
        :label="Artikel.kleinerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <br>
    <br>
    <br>
    <el-button type="primary" round style="margin-left:280px" @click.native.prevent="commit">Hinzufügen</el-button>
    <el-button type="primary" round style="margin-left:100px" @click.native.prevent="cancel">Abbrechen</el-button>
  </div>
</Vorlage>

<Skript>
    Standard exportieren {
        Filter:
            parseTime(Zeitstempel) {
                returniere parseTime(Zeitstempel, null)
            }
        },
        Daten() {
            zurückkehren {
                groß: '',
                großeTypen: null,
                Mitte: '',
                mittlereTypen: null,
                klein: '',
                kleineTypen: null,
                Datenliste: [
                    {"id":1,"categoryType":"BIG","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":null,"smallCategoryName":null,"parentId":0,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":"2021-07-04T13:34:31.000+0000","isDeleted":false},
                    {"id":27,"categoryType":"BIG","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":null,"smallCategoryName":null,"parentId":0,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":2,"categoryType":"MIDDLE","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":"1.1 Site-Überwachung","smallCategoryName":null,"parentId":1,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":10,"categoryType":"MIDDLE","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":"1.2 Site-Sicherheit","smallCategoryName":null,"parentId":1,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":3,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.1 Meteorologische Überwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":4,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.2 Erdbebenüberwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":5,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.3 Überwachung geologischer Gefahren","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":6,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.4 Hydrologische Überwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":7,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.5 Umweltüberwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":8,"categoryType":"SMALL","bigCategoryName":"1. Vor-Ort-Management und Garantie","middleCategoryName":"1.1 Vor-Ort-Überwachung","smallCategoryName":"1.1.6 Krankheitsüberwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":9,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.7 Beobachtung und Messung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":11,"categoryType":"SMALL","bigCategoryName":"1. Site Management und Sicherheit","middleCategoryName":"1.2 Site Sicherheit","smallCategoryName":"1.2.1 Site Beleuchtung","parentId":10,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":12,"categoryType":"SMALL","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":"1.2 Site-Sicherheit","smallCategoryName":"1.2.2 Site-Alarm","parentId":10,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":28,"categoryType":"MIDDLE","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":null,"parentId":27,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":34,"categoryType":"MIDDLE","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Lebenssuche und -rettung","smallCategoryName":null,"parentId":27,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":"2021-07-04T13:03:23.000+0000","isDeleted":false},
                    {"id":29,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.1 Gesundheit und Seuchenprävention","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":30,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.2 Brandschutz","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":31,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.3 Chemie und Strahlung","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":32,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.4 Sturzprävention","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":33,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.5 Allgemeiner Schutz","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":35,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Lebenssuche und -rettung","smallCategoryName":"2.2.1 Lebenssuche","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":36,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Suche und Rettung von Menschenleben","smallCategoryName":"2.2.2 Rettung beim Klettern","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":37,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Suche und Rettung von Menschenleben","smallCategoryName":"2.2.3 Abbruch- und Hebearbeiten","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":38,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Lebenssuche und -rettung","smallCategoryName":"2.2.4 Unterwasserrettung","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":39,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Suche und Rettung von Leben","smallCategoryName":"2.2.5 Allgemeine Werkzeuge","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false}
                    ]
            }
        },
        erstellt() {
            this.getSuppliesType(0)
        },
        Methoden: {
            getSuppliesType(id) {
                const queryData = {
                    übergeordneteID: ID
                }
                //Dies ist eine JS-Simulation. Die Erfassung realer Daten erfordert außerdem die Unterstützung der Backend-Schnittstelle getSuppliersType(JSON.stringify(queryData)).then(response => {
                    console.log(Antwort)
                    Konsole.log(Antwort.Daten[0].Kategorietyp)
                    //Speichern Sie die Abfrageergebnisse let tmpList = []
                    diese.dataList.forEach((item, index) => {
                        wenn(item.parentId === id){
                            tmpList.push(Element)
                        }
                    })
                    wenn (tmpList[0].categoryType === 'BIG') {
                        this.bigTypes = temporäreListe
                    } sonst wenn (response.data[0].categoryType === 'MIDDLE') {
                        this.middleTypes = temporäreListe
                    } anders {
                        this.smallTypes = temporäreListe
                    }
                }).catch(Funktion (Fehler) {
                    console.log(Fehler)
                })
            },
            begehen() {
                console.log("Senden-Button angeklickt")
            },
            stornieren() {
                dies.$router.go(-1)
            }
        }
    }
</Skript>

Es liegt wieder unterhalb der Trennlinie, und dieser Artikel endet hier. Der Inhalt dieses Artikels wird vom Blogger selbst sortiert und in Kombination mit seinem eigenen Verständnis zusammengefasst

Dies ist das Ende dieses Artikels über das Design und die Implementierung der kaskadierenden Dropdown-Box von Vue. Weitere relevante Inhalte zur kaskadierenden Dropdown-Box von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Beispiel für eine kaskadierende Dropdown-Box in Vue.js 2.0 auswählen

<<:  Installation und Verwendung der Ubuntu 18.04 Serverversion (Bild und Text)

>>:  Detaillierte Erläuterung der Konzepte, Prinzipien und allgemeinen Verwendung von gespeicherten MySQL-Prozeduren

Artikel empfehlen

CSS kompletter Parallax-Scrolling-Effekt

1. Was ist Beim Parallax-Scrolling handelt es sic...

So installieren Sie Docker auf Ubuntu20.04 LTS

Null: Alte Version deinstallieren Ältere Versione...

Erstellen Sie ein SSL-Zertifikat, das in nginx und IIS verwendet werden kann

Inhaltsverzeichnis Erstellen eines SSL-Zertifikat...

Detaillierte Erläuterung der Docker Volume-Berechtigungsverwaltung

Das Datenvolumen ist ein wichtiges Konzept von Do...

11 Möglichkeiten, Duplikate aus JS-Arrays zu entfernen

Bei der tatsächlichen Arbeit oder bei Interviews ...

Ein Artikel zeigt Ihnen, wie Sie mit React ein Rezeptsystem implementieren

Inhaltsverzeichnis 1. Rezeptsammlung 1.1 Projekth...

Methoden zum lokalen Sichern von Windows Server-Dateien, Lösungen zum Sichern von Windows Server-Daten

Wichtige Daten müssen gesichert werden, und zwar ...

So installieren Sie die Yum-Quelle und laden die Befehle rz und sz unter CentOS7 hoch und herunter (mit Bildern)

** Detaillierte grafische Anweisungen zur Install...

Eine gründliche Analyse der HTML-Sonderzeichen

Eine gründliche Analyse von HTML (14) Sonderzeich...

Detaillierte Erläuterung der Verwendung von backgroundImage zum Lösen des Bildkarussellwechsels

Implementieren eines Karussells mit einem einzeln...

Beheben einiger häufiger Probleme in CSS (Hack-Logo/fester Container/vertikale Zentrierung von Bildern)

1. IE-Browsermodus Hack-Logo 1. CSS-Hack-Logo Code...

jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln

Dieses Artikelbeispiel teilt den spezifischen Cod...

Analyse der MySQL-Ansichtsfunktionen und Anwendungsbeispiele

Dieser Artikel veranschaulicht anhand von Beispie...

Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker

Vor Kurzem musste ich die Zoom-Videokonferenz tes...

Detaillierte Erklärung der Vue-Filter

<Text> <div id="Wurzel"> &l...