wl vue select
1.0.0
Baum-Dropdown-Feld und normales Dropdown-Feld mit allen Auswahlmöglichkeiten für das Vue-Framework.
Baum-Dropdown-Feld für das Vue-Framework und normales Dropdown-Feld mit „Alles auswählen“.
Diese Komponente stellt die Funktionen „Alles auswählen“-Dropdown-Feld und Baum-Dropdown-Feld bereit.
wlVueSelect ist ein sekundäres gekapseltes Dropdown-Feld, das auf der el-select-Komponente von elementUi basiert und All-Select-Funktionen und Standardauswahlfunktionen bereitstellt.
wlTreeSelect ist ein sekundäres gekapseltes Dropdown-Feld, das auf der El-Tree-Komponente von elementUi basiert und Baumdatenunterstützung und Standardauswahlfunktionen bietet.
Da diese beiden Anforderungen sehr häufig vorkommen, werden sie als separate Plug-Ins veröffentlicht.
el-wählen
0.4.8 Das Problem wurde behoben, dass der übergeordnete Knoten nicht abgebrochen werden konnte, wenn alle untergeordneten Knoten im Baum-Dropdown-Feld ausgewählt wurden.
npm i wl-vue-select --save
oder
npm i wl-vue-select -S
verwenden
import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
<wlVueSelect
v-model="value"
:props="props"
:data="data"
multiple
default-select
></wlVueSelect>
<p>----------分割线------------</p>
<wlTreeSelect
leaf
width="240"
checkbox
:data="treeData"
@change="hindleChanged"
v-model="selected"
></wlTreeSelect>
data() {
return {
value: [], // 选中值
data: [
{
id: 1,
name: "海边"
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
], // 数据
props: {
label: "name",
value: "id"
}, // 配置
treeData: [
{
id: "love",
name: "所有和你走过的风光",
children: [
{
id: 1,
name: "海边",
children: [
{
id: 5,
name: "蓬莱",
}
]
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
]
}
],
selected: [ "1" ]// 树下拉框选中数据
};
},
methods: {
hindleChanged(val){
console.log(val,2)
console.log(this.selected)
}
},
| Seriennummer | Parameter | veranschaulichen | Typ | Optionaler Wert | Standardwert |
|---|---|---|---|---|---|
| 1 | Daten | Optionen optionale Listendaten | Array | - | - |
| 2 | Requisiten | Konfigurationselemente: das Beschriftungsfeld, das den Namen anzeigt, und das Wertfeld, das den Wert bindet | Objekt | - | { Label: „Label“, Wert: „Wert“ } |
| 3 | showTotal | Zeigen Sie die Option全选“ an, wenn mehr als ein paar Optionen verfügbar sind | Nummer | - | 1 |
| 4 | defaultSelect[veraltet] | Gibt an, ob die Standardauswahl aktiviert werden soll. Wenn全部aktiviert ist, werden alle ausgewählt. Wenn nicht alle, wird das erste ausgewählt. (Bitte weisen Sie dem V-Modell keinen Anfangswert zu, wenn Sie diese Funktion aktivieren.) | Boolescher Wert | - | FALSCH |
| 5 | andere | Weitere von el-select bereitgestellte Parameter | - | - | - |
| 6 | nodeKey | Wenn Sie das Baum-Dropdown-Feld verwenden, müssen Sie den Schlüssel verwenden, um die Daten zu analysieren | Zeichenfolge | - | AUSWEIS |
| 7 | ausgewählt[veraltet] | Wenn Sie das Baum-Dropdown-Feld verwenden, binden Sie die ausgewählten Daten [jetzt geändert in V-Modell]. | String-Nummer-Array-Objekt | - | - |
| 8 | Kontrollkästchen | Wenn Sie das Baum-Dropdown-Feld verwenden, legen Sie fest, ob die Mehrfachauswahl aktiviert werden soll | Boolescher Wert | - | FALSCH |
| 9 | Breite | Breite bei Verwendung des Baum-Dropdown-Felds, Standardeinheit ist px | String-Nummer | - | 240 |
| 10 | Blatt | In einem Baum-Dropdown-Feld wird angegeben, ob nur Blattknoten ausgewählt werden können | Boolescher Wert | - | FALSCH |
| 11 | auslösen | Bei Verwendung des Baum-Dropdown-Felds die auslösende Methode | Zeichenfolge | Klicken/Fokus/Hover/Manuell | klicken |
| 12 | V-Modell | Normale und Baum-Dropdown-Box-Bindungswerte werden genauso verwendet wie normale Formularelemente. | String-Nummer-Array-Objekt | - | - |
| 13 | deaktiviert | Ob das Dropdown-Feld deaktiviert werden soll | Boolescher Wert | - | FALSCH |
| 14 | nowrap | Gibt an, ob die Anzeige mehrerer Zeilen verhindert werden soll. Wenn „true“, wird nur eine Zeile angezeigt. | Boolescher Wert | - | FALSCH |
| 15 | noCheckedClose | Wenn mehrere Auswahlen getroffen werden, wird festgelegt, ob der Optionsbereich automatisch geschlossen werden soll, wenn alle nicht ausgewählt sind | Boolescher Wert | - | FALSCH |
| 16 | Größe | Größe und Verwendung sind die gleichen wie bei elementui | Zeichenfolge | - | Medium |
| 17 | defaultExpandAll | Gibt in der Baumform an, ob standardmäßig alle Optionen erweitert werden sollen | Boolescher Wert | - | WAHR |
| 18 | defaultExpandedKeys | In der Baumform werden Knotenschlüssel standardmäßig erweitert. | Array | - | - |
| 19 | filterbar | Ob die Suchfunktion aktiviert werden soll (beim Hinzufügen eines Baum-Dropdown-Felds hat es dieselbe Funktion wie ein gewöhnliches Dropdown-Feld) | Boolescher Wert | - | FALSCH |
| 20 | filterFnc | In der Baumform können Sie optional die Suchlogik anpassen. Wenn sie nicht übergeben wird, basiert die Suche auf dem Feld, das der Beschriftung in den Requisiten entspricht. Funktion(Wert,Daten) | Funktion | - | - |
| einundzwanzig | checkStreng | Gibt in der Baumform an, ob Elternteil und Kind nicht miteinander verbunden sind | Boolescher Wert | - | FALSCH |
| zweiundzwanzig | expandOnClickNode | Gibt in der Baumform an, ob durch Klicken auf einen Knoten dieser vergrößert oder verkleinert werden kann | Boolescher Wert | - | FALSCH |
| dreiundzwanzig | checkOnClickNode | Ob beim Klicken auf den Knoten der Knoten ausgewählt werden soll, der Standardwert ist false, dh der Knoten wird nur ausgewählt, wenn auf das Kontrollkästchen geklickt wird | Boolescher Wert | - | FALSCH |
| Seriennummer | Name | veranschaulichen | Parameter |
|---|---|---|---|
| 1 | closeOptions | Schließen Sie den Optionsbereich des Baum-Dropdown-Felds | - |
0.5.8 Eltern-Kind-unabhängige Konfiguration im Baum-Dropdown-Feld hinzugefügt
0.5.5 Fehler bei der automatischen Auswahllogik behoben, wenn der anfängliche Bindungswert des Baum-Dropdown-Felds ein einfaches Array ist; der vertikale Zentrierungsstil wurde behoben;
0.5.4 Das Problem wurde behoben, dass bei der anfänglichen Auswahl aller Daten jedes Element im Anzeigebereich aufgeführt wird, anstatt „alle“ anzuzeigen. Die Skripteinführungsfunktion wurde hinzugefügt.
0.5.3 Passen Sie den Komponentennamen an, um eine bedarfsgerechte Einführung hinzuzufügen
0.5.2 Optimieren Sie das Baum-Dropdown-Feld und fügen Sie Such- und benutzerdefinierte Suchfunktionen hinzu
0.5.1 Optimieren Sie das Baum-Dropdown-Feld und die Optionen zeigen übermäßige Effekte an
0.5.0 Baum-Dropdown-Felder defaultExpandAll und defaultExpandedKeys hinzugefügt
0.4.9 Fügen Sie die closeOptions-Methode zum Schließen des Optionsbereichs des Baum-Dropdown-Felds hinzu
0.4.8 Das Problem wurde behoben, dass der übergeordnete Knoten nicht abgebrochen werden konnte, wenn alle untergeordneten Knoten im Baum-Dropdown-Feld ausgewählt wurden.
0.4.7 Optimieren Sie das Baum-Dropdown-Feld und unterstützen Sie die Collapse-Tags von el-select
0.4.6 Optimieren Sie das Baum-Dropdown-Feld und machen Sie das Größenattribut wirksam
0.4.5 Optimieren Sie den Platzhalter für das Baum-Dropdown-Feld und fügen Sie eine Parameterverwaltung hinzu, um die Option zu schließen, wenn alle nicht ausgewählt sind.
0.4.2 Optimieren Sie das Baum-Dropdown-Feld und fügen Sie hinzu, ob mehrere Feldzeilen nicht zugelassen werden sollen.
0.4.1 Optimieren Sie das Baum-Dropdown-Feld und fügen Sie deaktivierte Felder hinzu
0.3.9 Optimieren Sie das Baum-Dropdown-Feld, um standardmäßig die ID zu extrahieren, wenn die ausgewählten übergebenen Daten ein komplexes Array sind;
0.3.8 Das Problem wurde behoben, dass bei mehrfacher Auswahl des Baum-Dropdown-Felds nur der Anzeigebereich geleert wird, das Baum-Kontrollkästchen jedoch nicht geleert wird, wenn die Daten leer sind.
0.3.7 Ändern Sie, ob beim Auswählen des Baum-Dropdown-Felds nur untergeordnete Knoten gemäß dem Blattfeld ausgewählt werden sollen.
0.3.5 Der Fehler der Standardauswahl in der Radioauswahl im Baum-Dropdown-Feld wurde behoben [wenn der gebundene Wert ein Array ist]
0.3.4 Das Problem, dass das standardmäßig ausgewählte Feld des Baum-Dropdown-Felds el-tree leer ist und die getNodes-Methode auch den letzten Wert abrufen kann, wurde behoben
0.3.3 Das Problem der Endlosschleife, wenn die Mehrfachauswahl im Baum-Dropdown-Feld aktiviert ist, wurde behoben und das
leafoptimiert, um zu bestimmen, ob nur Blattknoten zurückgegeben werden sollen, wenn die Mehrfachauswahl aktiviert ist.
0.3.2 Das Problem, dass das Baum-Dropdown-Feld nicht angezeigt wird, wenn es sich horizontal erstreckt, wurde optimiert
0.3.0 Optimieren Sie das Baum-Dropdown-Feld und fügen Sie ein Feld für den Trigger-Anzeigemodus hinzu
0.2.7 Bei der Optimierung der Einzelauswahl des Baum-Dropdown-Felds wird die optionale Ebene hinzugefügt und
leafhinzugefügt, um festzulegen, ob nur Blattknoten ausgewählt werden können, die Hervorhebung Effekt, wenn der Objekttyp standardmäßig ausgewählt ist
0.2.5 Optimieren Sie den Filteralgorithmus für das Baum-Dropdown-Feld und optimieren Sie das Baum-Dropdown-Feld, um den Bildlaufeffekt zu erhöhen, wenn die verfügbaren Optionen zu lang sind
0.2.4 Das Leerproblem wurde behoben, wenn showTotal größer als die Datenlänge ist.
0.2.3 Aktualisiertes Beispiel
0.2.2 Dropdown-Feld „Baum hinzufügen“
0.1.2 Algorithmus aktualisieren, die Option „Alle auswählen“ muss nicht manuell abgebrochen werden, wenn von der Gesamtauswahl zur Einzelauswahl gewechselt wird
0.1.0 wird zum ersten Mal veröffentlicht und fügt „Alle auswählen“ und Standardauswahlfunktionen basierend auf el-select hinzu.
