wl vue select
1.0.0
Boîte déroulante d'arborescence et boîte déroulante ordinaire avec toutes les sélections pour le framework vue.
Boîte déroulante d'arborescence pour le framework Vue et boîte déroulante ordinaire avec tout sélectionner.
Ce composant fournit des fonctions de liste déroulante de sélection totale et de liste déroulante d'arborescence.
wlVueSelect est une liste déroulante encapsulée secondaire basée sur le composant el-select d'elementUi, qui fournit des fonctions de sélection totale et des fonctions de sélection par défaut ;
wlTreeSelect est une liste déroulante encapsulée secondaire basée sur le composant el-tree d'elementUi, qui fournit une prise en charge des données d'arborescence et des fonctions de sélection par défaut ;
Ces deux besoins étant très courants, ils sont publiés sous forme de plug-in distinct.
el-sélectionner
0.4.8 Correction du problème selon lequel le nœud parent ne peut pas être annulé lorsque tous les nœuds enfants sont sélectionnés dans la liste déroulante de l'arborescence.
npm i wl-vue-select --save
ou
npm i wl-vue-select -S
utiliser
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)
}
},
| numéro de série | paramètre | illustrer | taper | Valeur facultative | valeur par défaut |
|---|---|---|---|---|---|
| 1 | données | options liste facultative données | Tableau | - | - |
| 2 | accessoires | Éléments de configuration : le champ d'étiquette qui affiche le nom et le champ de valeur qui lie la valeur | Objet | - | { étiquette : "étiquette", valeur : "valeur" } |
| 3 | afficherTotal | Afficher l'option全选lorsque plusieurs options sont disponibles | Nombre | - | 1 |
| 4 | defaultSelect[obsolète] | S'il faut activer la sélection par défaut, si全部est activé, tout sera sélectionné, sinon tout, le premier sera sélectionné. (Veuillez ne pas attribuer de valeur initiale au v-model lors de l'activation de cette fonction) | Booléen | - | FAUX |
| 5 | autre | Autres paramètres fournis par el-select | - | - | - |
| 6 | clé de nœud | Lorsque vous utilisez la liste déroulante de l'arborescence, vous devez utiliser la clé pour analyser les données | Chaîne | - | IDENTIFIANT |
| 7 | sélectionné[obsolète] | Lorsque vous utilisez la liste déroulante de l'arborescence, liez les données sélectionnées [maintenant remplacées par v-model] | Chaîne-Numéro-Array-Objet | - | - |
| 8 | case à cocher | Lors de l'utilisation de la liste déroulante de l'arborescence, s'il faut activer la sélection multiple | Booléen | - | FAUX |
| 9 | largeur | Largeur lors de l'utilisation de la liste déroulante de l'arborescence, l'unité par défaut est px | Numéro de chaîne | - | 240 |
| 10 | feuille | Dans une liste déroulante d'arborescence, indique si seuls les nœuds feuilles peuvent être sélectionnés | Booléen | - | FAUX |
| 11 | déclenchement | Lorsque la liste déroulante de l'arborescence est utilisée, la méthode de déclenchement | Chaîne | clic/focus/survol/manuel | cliquez |
| 12 | modèle en V | Les valeurs de liaison des zones déroulantes normales et arborescentes sont utilisées de la même manière que les éléments de formulaire ordinaires. | Chaîne-Numéro-Array-Objet | - | - |
| 13 | désactivé | S'il faut désactiver la liste déroulante | Booléen | - | FAUX |
| 14 | maintenant | S'il faut interdire l'affichage de plusieurs lignes. Si vrai, une seule ligne sera affichée. | Booléen | - | FAUX |
| 15 | nonVérifiéFermer | Lorsque plusieurs sélections sont effectuées, s'il faut fermer automatiquement la zone d'options lorsque toutes sont désélectionnées | Booléen | - | FAUX |
| 16 | taille | La taille, l'utilisation est la même que celle d'Elementui | Chaîne | - | moyen |
| 17 | par défautDévelopperTout | En forme d'arborescence, s'il faut développer toutes les options par défaut | Booléen | - | vrai |
| 18 | Clés étendues par défaut | En forme d'arborescence, les clés des nœuds sont développées par défaut. | Tableau | - | - |
| 19 | filtrable | S'il faut activer la fonction de recherche (lors de l'ajout d'une liste déroulante arborescente, elle a la même fonction qu'une liste déroulante ordinaire) | Booléen | - | FAUX |
| 20 | filtreFnc | Dans la forme de l'arborescence, vous pouvez éventuellement personnaliser la logique de recherche. Si elle n'est pas transmise, la recherche sera basée sur le champ correspondant au label dans les accessoires. fonction (valeur, données) | Fonction | - | - |
| vingt-et-un | checkStrictement | En forme d'arbre, si le parent et l'enfant ne sont pas liés | Booléen | - | FAUX |
| vingt-deux | développerOnClickNode | En forme d'arbre, si cliquer sur un nœud peut l'agrandir ou le réduire | Booléen | - | FAUX |
| vingt-trois | checkOnClickNode | S'il faut sélectionner le nœud en cliquant sur le nœud, la valeur par défaut est fausse, c'est-à-dire que le nœud ne sera sélectionné que lorsque la case à cocher est cliquée | Booléen | - | FAUX |
| numéro de série | nom | illustrer | paramètre |
|---|---|---|---|
| 1 | fermerOptions | Fermez la zone d'options de la liste déroulante de l'arborescence | - |
0.5.8 Ajout d'une configuration indépendante parent-enfant dans la liste déroulante de l'arborescence
0.5.5 Correction de l'erreur de logique de sélection automatique lorsque la valeur de liaison initiale de la liste déroulante de l'arborescence est un simple tableau, correction du style de centrage vertical ;
0.5.4 Correction du problème selon lequel lorsque toutes les données sont initialement sélectionnées, chaque élément est répertorié dans la zone d'affichage au lieu d'afficher « tout » ; la fonction d'introduction du script est ajoutée ;
0.5.3 Ajuster le nom du composant en grosse bosse ; ajouter une introduction à la demande
0.5.2 Optimiser la liste déroulante de l'arborescence et ajouter des fonctions de recherche et de recherche personnalisée
0.5.1 Optimisez la liste déroulante de l'arborescence et les options affichent des effets excessifs
0.5.0 Ajout de la liste déroulante de l'arborescence defaultExpandAll, champs defaultExpandedKeys
0.4.9 Ajouter la méthode closeOptions pour fermer la zone d'options de la liste déroulante de l'arborescence
0.4.8 Correction du problème selon lequel le nœud parent ne peut pas être annulé lorsque tous les nœuds enfants sont sélectionnés dans la liste déroulante de l'arborescence.
0.4.7 Optimiser la liste déroulante de l'arborescence et prendre en charge les balises d'effondrement d'el-select
0.4.6 Optimiser la liste déroulante de l'arborescence et rendre l'attribut size efficace
0.4.5 Optimisez l'espace réservé de la liste déroulante de l'arborescence et ajoutez la gestion des paramètres pour fermer l'option lorsque tous ne sont pas sélectionnés.
0.4.2 Optimisez la liste déroulante de l'arborescence et ajoutez s'il faut interdire plusieurs lignes de champs.
0.4.1 Optimiser la liste déroulante de l'arborescence et ajouter des champs désactivés
0.3.9 Optimiser la liste déroulante de l'arborescence pour extraire l'identifiant par défaut lorsque les données sélectionnées transmises sont un tableau complexe ;
0.3.8 Correction du problème selon lequel lorsque la liste déroulante de l'arborescence est multi-sélectionnée, seule la zone d'affichage est effacée mais la case à cocher de l'arborescence n'est pas effacée lorsque les données sont vides.
0.3.7 Modifier s'il faut sélectionner uniquement les nœuds enfants en fonction du champ feuille lors de la sélection de la liste déroulante de l'arborescence.
0.3.5 Correction du défaut de sélection par défaut dans la sélection radio de la liste déroulante de l'arborescence [lorsque la valeur liée est un tableau]
0.3.4 Correction du problème selon lequel le champ sélectionné par défaut de la liste déroulante de l'arborescence el-tree est vide et la méthode getNodes peut également obtenir la dernière valeur. Exemple de rademe mis à jour.
0.3.3 Correction du problème de boucle infinie lorsque la sélection multiple est activée dans la liste déroulante de l'arborescence et optimisation du champ
leafpour déterminer s'il faut renvoyer uniquement les nœuds feuilles lorsque la sélection multiple est activée.
0.3.2 Optimiser le problème que la liste déroulante de l'arborescence ne s'affiche pas lorsqu'elle s'étend horizontalement
0.3.0 Optimiser la liste déroulante de l'arborescence et ajouter un champ de mode d'affichage du déclencheur
0.2.7 Lors de l'optimisation de la sélection unique de la liste déroulante de l'arborescence, le niveau facultatif est ajouté et
leafest ajouté pour définir si seuls les nœuds feuilles peuvent être sélectionnés. Lorsque la sélection unique de l'arborescence est optimisée, la surbrillance. effet lorsque le type d'objet est sélectionné par défaut
0.2.5 Optimiser l'algorithme de filtrage de la liste déroulante de l'arborescence, optimiser la liste déroulante de l'arborescence pour augmenter l'effet de défilement lorsque les options disponibles sont trop longues
0.2.4 Correction du problème de vide lorsque showTotal est supérieur à la longueur des données.
0.2.3 Exemple mis à jour
0.2.2 Ajouter une liste déroulante d'arborescence
0.1.2 Algorithme de mise à jour, pas besoin d'annuler manuellement l'option Sélectionner tout lors du passage de toutes les sélections à une sélection unique
0.1.0 est publié pour la première fois, ajoutant des fonctions de sélection de tout et de sélection par défaut basées sur el-select.
