Vue + Element zur dynamischen Anzeige von Hintergrunddaten zu Optionen

brauchen:

Implementieren Sie die dynamische Anzeige von Optionwerten im Selektor anstelle von fest codierten Daten. Meine Rollen-ID-Daten lauten wie folgt:

Nun müssen wir diese Datenanfragen auf der Option anzeigen

Die Implementierung ist wie folgt:

Verwenden Sie den Selektor in der Element-Benutzeroberfläche:

<el-form-item label="Rollen-ID:" prop="Rollen-ID">
    <el-select v-model="addUserForm.roleId" placeholder="Bitte wählen Sie die Rollen-ID">
      <el-Option
          v-for="Element in Rollenliste"
          :Schlüssel="Artikel.Wert"
          :label="Artikel.label"
          :Wert="Artikel.Wert">
      </el-Option>
    </el-Auswahl>
</el-form-item>

Passen Sie ein leeres Array in Daten an:

Schreiben Sie die Anfrage zur Implementierung der Daten in Methoden:

getroleList() {
   getRoleList(diesen.Namen).then(res => {
     lass Ergebnis = res.data.items;
     console.log("Rollenliste abrufen: " +JSON.stringify(this.roleList));
     Ergebnis.fürJedes(Element => {
     	this.roleList.push({label:element.name,value:element.name});
     });
     }).catch( Fehler => {
       konsole.log(Fehler);
  });
},

In der erstellten Implementierungsanzeige:

Wobei getRoleList die von mir gekapselte Get-Anfrage ist:

Die Ergebnisse sind wie folgt:

Dies ist das Ende dieses Artikels über die Verwendung von Vue + Element zur dynamischen Anzeige von Hintergrunddaten für Optionen. Weitere relevante Inhalte zu dynamischen Optionen von Vue Element 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!