el select v2

Wählen Sie den virtuellen Listenselektor V2 aus

Virtuelle Listenauswahlkomponente basierend auf Element UI für Vue 2-Version.

Online-Demo

Online-Demo

Gebrauchsanweisung

npm i el-select-v2 npm i element-ui

  import Vue from 'vue' ;
// 必须引入 element-ui
import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ;
import ElSelectV2 from 'el-select-v2' ;

Vue . use ( ElSelectV2 ) ; 

< template >
  < el-select-v2 v-model = " value " :options = " options " />
</ template >

< script >
  export default {
    data () {
      return {
        options : [],
        value : ' ' ,
      };
    },
    created () {
      for ( let i = 0 ; i < 10000 ; i ++ ) {
        this . options . push ({
          value : ` value ${ i + 1 } ` ,
          label : ` label ${ i + 1 } ` ,
        });
      }
    },
  };
</ script >

Beispielcode

Beispielcode

Wählen Sie Attribute aus

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Wert/V-Modell	Bindungswert	Boolescher Wert/Zeichenfolge/Zahl	—	—
Optionen	Daten auflisten	Array	—	—
Wertschlüssel	Wertschlüsselname	Zeichenfolge	—	Wert
Etikettenschlüssel	Label-Schlüsselname	Zeichenfolge	—	Etikett
Optionstaste (1.4.6)	Optionsschlüsselname	Zeichenfolge	—	Optionen
Disabled-Key (1.4.1)	deaktivierter Schlüsselname	Zeichenfolge	—	deaktiviert
Objektschlüssel (1.4.0)	Der Schlüsselname, wenn der gebundene Wert ein Objekttyp ist	Zeichenfolge	—	Wert
Mindestelementgröße	Mindesthöhe für jede Option	Nummer	—	34
mehrere	Ob mehrere ausgewählt werden sollen	Boolescher Wert	—	FALSCH
deaktiviert	Ob deaktiviert werden soll	Boolescher Wert	—	FALSCH
Größe	Größe des Eingabefelds	Zeichenfolge	mittel/klein/mini	—
abklärbar	Ist es möglich, Optionen zu löschen?	Boolescher Wert	—	FALSCH
Kollaps-Tags	Ob der ausgewählte Wert bei Mehrfachauswahl als Text angezeigt werden soll	Boolescher Wert	—	FALSCH
Mehrfachlimit	Die maximale Anzahl von Elementen, die der Benutzer bei einer Mehrfachauswahl auswählen kann. Wenn sie 0 ist, gibt es keine Begrenzung.	Nummer	—	0
Name	Namensattribut der ausgewählten Eingabe	Zeichenfolge	—	—
automatische Vervollständigung	Autovervollständigungsattribut der ausgewählten Eingabe	Zeichenfolge	—	aus
Platzhalter	Platzhalter	Zeichenfolge	—	Bitte auswählen
filterbar	Ist es durchsuchbar?	Boolescher Wert	—	FALSCH
erlauben-erstellen	Ob Benutzer neue Einträge erstellen dürfen, muss mit filterable verwendet werden	Boolescher Wert	—	FALSCH
Filtermethode	Benutzerdefinierte Suchmethode	Funktion	—	—
Fernbedienung	Ob es sich um eine Fernsuche handelt	Boolescher Wert	—	FALSCH
Remote-Methode	Fernsuchmethode	Funktion	—	—
Laden	Ob Daten aus der Ferne abgerufen werden	Boolescher Wert	—	FALSCH
Ladetext	Text, der während des Remote-Ladens angezeigt wird	Zeichenfolge	—	Laden
No-Match-Text	Der Text wird angezeigt, wenn keine Suchbedingungen übereinstimmen. Sie können auch die Einstellung slot="empty" verwenden	Zeichenfolge	—	Keine passenden Daten
Kein-Daten-Text	Der Text, der angezeigt wird, wenn die Option leer ist, kann auch mit slot="empty" eingestellt werden.	Zeichenfolge	—	Keine Daten
Popper-Klasse	Wählen Sie den Klassennamen des Dropdown-Felds aus	Zeichenfolge	—	—
Reserveschlüsselwort	Bei Mehrfachauswahl und Durchsuchbarkeit: Legt fest, ob das aktuelle Suchwort nach Auswahl einer Option beibehalten werden soll	Boolescher Wert	—	WAHR
Standard-erste-Option	Drücken Sie im Eingabefeld die Eingabetaste und wählen Sie die erste Übereinstimmung aus. Muss mit filterable oder remote verwendet werden	Boolescher Wert	—	FALSCH
popper-append-to-body	Ob das Popup-Feld in das Body-Element eingefügt werden soll. Wenn bei der Positionierung des Popup-Felds ein Problem auftritt, können Sie diese Eigenschaft auf „false“ setzen	Boolescher Wert	—	WAHR
Automatisches Dropdown	Für nicht durchsuchbare Optionen: Wählen Sie aus, ob das Optionsmenü automatisch angezeigt werden soll, nachdem das Eingabefeld den Fokus erhält	Boolescher Wert	—	FALSCH
fit-input-width (1.1.0)	Ob die Breite des Dropdown-Felds mit der des Eingabefelds übereinstimmt. Nachdem Sie es auf „false“ gesetzt haben, wird die Breite automatisch berechnet und die Leistung verringert.	Boolescher Wert	—	WAHR

Wählen Sie Ereignisse aus

Veranstaltungsname	veranschaulichen	Rückrufparameter
ändern	Wird ausgelöst, wenn sich der ausgewählte Wert ändert	Aktuell ausgewählter Wert
sichtbare Veränderung	Wird ausgelöst, wenn das Dropdown-Feld angezeigt/ausgeblendet wird	True, wenn es angezeigt wird, false, wenn es ausgeblendet ist
Tag entfernen	Wird ausgelöst, wenn das Tag im Mehrfachauswahlmodus entfernt wird	Tag-Wert entfernt
klar	Wird ausgelöst, wenn der Benutzer im löschbaren Funkmodus auf die Schaltfläche „Löschen“ klickt	—
verwischen	Wird ausgelöst, wenn die Eingabe den Fokus verliert	(Ereignis: Ereignis)
Fokus	Wird ausgelöst, wenn die Eingabe den Fokus erhält	(Ereignis: Ereignis)

Wählen Sie Slots

Name	veranschaulichen
—	Benutzerdefinierte Vorlage, Parameter ist { item }
Kopfzeile (1.3.0)	Inhalte oben in der Dropdown-Liste
Fußzeile (1.3.0)	Inhalte unten in der Dropdown-Liste
Präfix	Wählen Sie den Inhalt der Komponentenkopfzeile aus
leer	Liste ohne Optionen

Optionen

Parameter	veranschaulichen	Typ	Optionaler Wert	Standardwert
Wert	Optionswert	Zeichenfolge/Zahl/Objekt	—	—
Etikett	Die Bezeichnung der Option, wenn sie nicht festgelegt ist, wird standardmäßig derselbe value	Zeichenfolge/Zahl	—	—
Optionen (1.2.0)	Gruppierungsoptionen	Array	—	—
deaktiviert	Ob diese Option deaktiviert werden soll	Boolescher Wert	—	FALSCH

Methoden

Methodenname	veranschaulichen	Parameter
Fokus	Sorgen Sie dafür, dass Ihre Eingaben den Fokus erhalten	—
verwischen	Lassen Sie die Eingabe den Fokus verlieren und blenden Sie das Dropdown-Feld aus	—