Ausführliche Erläuterung der Vue-Komponente „Multi-Select-Liste“

Eine Mehrfachauswahl ist ein Benutzeroberflächenelement, das alle Optionen auflistet und Benutzern ermöglicht, mithilfe der Tasten Strg/Umschalt mehrere Optionen auszuwählen. Dies ist ein gängiges Designelement. Um Platz zu sparen, fassen wir die Optionen manchmal in einer Kombinationsbox zusammen. Um die Benutzerbedienung zu erleichtern, werden dieser Komponente auch zwei Schaltflächen hinzugefügt: „Alles auswählen“ und „Alles löschen“, mit denen Benutzer die Auswahl schnell auswählen oder löschen können. Dieses UI-Element wurde zuvor in der Correlation Plot App verwendet.

Registrieren von Komponenten

Das Registrieren der Multi-Select-Komponente ist so einfach wie das Kopieren und Einfügen des gekapselten Codes. Es wird empfohlen, globale Komponenten hier zu registrieren.

Dieses Element wurde für zwei Modi entwickelt: Der erste besteht darin, dass bei jedem Klick auf eine neue Option die alten Optionen beibehalten und die neue hinzugefügt wird, wie in der Beispielgrafik oben gezeigt. Dies ist eine gängigere Methode. Zweitens wird jedes Mal, wenn Sie auf eine neue Option klicken, die alte Option gelöscht und nur die neue Option beibehalten. Wenn Sie mit dieser Methode mehrere Auswahlen treffen, müssen Sie die Strg-/Umschalttaste verwenden. Dieses Design macht es Benutzern leicht, alte Optionen mit jedem Klick zu löschen. Wenn Sie die zweite Methode verwenden, müssen Sie das Ereignis @click.exact="AddToOrDeleteFromSelectedColumns" durch @click.exact="ClickOnColumnListItem" ersetzen.

<script Typ="text/x-Vorlage" id="Mehrfachauswahl-Vorlage">
…
   <tr v-for = "(Element, Index) in Spalten" 
     @click.exact="AusgewähltenSpaltenHinzufügenOderLöschen"
     @click.shift.exact="MehrereZuAusgewähltenSpaltenHinzufügen"
     @click.ctrl.exact="AusgewähltenSpaltenHinzufügenOderLöschen"
     :title="Funktion(Artikel){wenn(Artikel.langer Name){return 'Kurzname: ' + Artikel. Name + '\n----------------\n' + Artikel.langer Name}sonst{return Artikel. Name}}(Artikel)"
     Klasse="Spaltenlisteneintrag">
   ...
   </tr>
</Skript>
<Skript>
Vue.component("Mehrfachauswahl", {
  Vorlage: "#Mehrfachauswahlvorlage",
…
</Skript>

Aufrufende Komponenten

Benutzerdefinierte Tags direkt hinzufügen Rufen Sie die Komponente auf.

<Mehrfachauswahl: Legendenname = "Legendenname"
       :columns="Spalten"
       :selected_columns="ausgewählte_Spalten"
       @update_selected_columns="beiÄnderungAusgewählterSpalten">
</Mehrfachauswahl>

Übergeben von Daten

Schließlich müssen Daten an die Komponente übergeben werden. Wir können v-bind verwenden, um Daten dynamisch an die Daten der übergeordneten Komponente zu binden.

In Requisiten ist legend_name an den Namen gebunden, den Multi-Select anzeigen muss, columns ist an die Optionen von Multi-Select gebunden und selected_columns ist an das aktuell ausgewählte Element gebunden. Darüber hinaus müssen wir in der übergeordneten Instanz auch das Ereignis „onSelectedColumnsChange“ definieren, um die Anzeige der Multi-Select-Komponente zu aktualisieren.

Daten: Funktion(){
   zurückkehren {
     legend_name: "Eingabespalten",
     Spalten: 
     [
       {"name":"A","longname":"Kupfer"},
       {"name":"B","longname":"Aluminium Aluminium"},
       {"Name":"C","Langname":"Calcium"},
       {"Name":"D","Langname":"Kalzium"},
   ],
     ausgewählte_Spalten: [],
   }
 },
... 
Methoden:{ 
   beiAusgewählteSpaltenÄnderung:Funktion(neue_Spalten) {
     diese.ausgewählte_Spalten = neue_Spalten;
   },
 },
...

Damit ist dieser Artikel mit der ausführlichen Erläuterung der Vue-Multi-Select-Listenkomponente abgeschlossen. Weitere relevante Inhalte zur Vue-Multi-Select-Listenkomponente finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!