el select v2

Sélectionnez le sélecteur de liste virtuelle V2

Composant de sélection de liste virtuelle basé sur Element UI pour la version Vue 2.

Démo en ligne

Démo en ligne

Mode d'emploi

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 >

Exemple de code

Exemple de code

Sélectionnez les attributs

paramètre	illustrer	taper	Valeur facultative	valeur par défaut
valeur/v-modèle	Valeur contraignante	booléen/chaîne/nombre	—	—
choix	Liste des données	tableau	—	—
clé de valeur	nom de la clé de valeur	chaîne	—	valeur
clé d'étiquette	nom de la clé de l'étiquette	chaîne	—	étiquette
clé d'options (1.4.6)	nom de la clé d'options	chaîne	—	choix
clé désactivée (1.4.1)	nom de la clé désactivée	chaîne	—	désactivé
clé d'objet (1.4.0)	Le nom de la clé lorsque la valeur liée est un type d'objet	chaîne	—	valeur
taille minimale de l'article	Hauteur minimale pour chaque option	nombre	—	34
multiple	S'il faut en sélectionner plusieurs	booléen	—	FAUX
désactivé	S'il faut désactiver	booléen	—	FAUX
taille	Taille de la zone de saisie	chaîne	moyen/petit/mini	—
effaçable	Est-il possible d'effacer les options	booléen	—	FAUX
réduire les balises	S'il faut afficher la valeur sélectionnée sous forme de texte lors de sélections multiples	booléen	—	FAUX
limite multiple	Le nombre maximum d'éléments que l'utilisateur peut sélectionner lors de sélections multiples. S'il est égal à 0, il n'y a pas de limite.	nombre	—	0
nom	attribut de nom de l'entrée sélectionnée	chaîne	—	—
saisie semi-automatique	attribut de saisie semi-automatique de l'entrée sélectionnée	chaîne	—	désactivé
espace réservé	espace réservé	chaîne	—	Veuillez sélectionner
filtrable	Est-il consultable ?	booléen	—	FAUX
autoriser-créer	La question de savoir si les utilisateurs sont autorisés à créer de nouvelles entrées doit être utilisée avec filterable	booléen	—	FAUX
méthode de filtrage	Méthode de recherche personnalisée	fonction	—	—
télécommande	Qu'il s'agisse d'une recherche à distance	booléen	—	FAUX
méthode à distance	Méthode de recherche à distance	fonction	—	—
chargement	Si les données sont obtenues à distance	booléen	—	FAUX
chargement-texte	Texte affiché lors du chargement à distance	chaîne	—	chargement
texte sans correspondance	Le texte affiché lorsqu'aucune condition de recherche ne correspond, vous pouvez également utiliser le paramètre slot="empty"	chaîne	—	Aucune donnée correspondante
pas de données-texte	Le texte affiché lorsque l'option est vide peut également être défini en utilisant slot="empty"	chaîne	—	Aucune donnée
classe popper	Sélectionnez le nom de la classe dans la liste déroulante	chaîne	—	—
réserver-mot-clé	En cas de sélection multiple et de recherche, s'il faut conserver le mot-clé de recherche actuel après avoir sélectionné une option	booléen	—	vrai
première option par défaut	Appuyez sur Entrée dans la zone de saisie et sélectionnez la première correspondance. Doit être utilisé avec filterable ou remote	booléen	—	FAUX
popper-ajouter-au-corps	S'il faut insérer la boîte contextuelle dans l'élément body. Lorsqu'il y a un problème avec le positionnement de la pop-up, vous pouvez définir cette propriété sur false	booléen	—	vrai
liste déroulante automatique	Pour une sélection non consultable, indique s'il faut automatiquement afficher le menu d'options une fois que la zone de saisie a pris le focus.	booléen	—	FAUX
ajuster la largeur d'entrée (1.1.0)	Si la largeur de la zone déroulante est la même que celle de la zone de saisie. Après l'avoir définie sur false, la largeur sera automatiquement calculée et les performances seront réduites.	booléen	—	vrai

Sélectionnez des événements

nom de l'événement	illustrer	paramètres de rappel
changement	Déclenché lorsque la valeur sélectionnée change	Valeur actuellement sélectionnée
changement visible	Déclenché lorsque la liste déroulante apparaît/se cache	Vrai s'il apparaît, faux s'il est masqué
supprimer la balise	Déclenché lorsque la balise est supprimée en mode multi-sélection	Valeur de balise supprimée
clair	Déclenché lorsque l'utilisateur clique sur le bouton d'effacement en mode radio effaçable	—
se brouiller	Déclenché lorsque l'entrée perd le focus	(événement : événement)
se concentrer	Déclenché lorsque l'entrée obtient le focus	(événement : événement)

Sélectionnez les emplacements

nom	illustrer
—	Modèle personnalisé, le paramètre est { item }
en-tête (1.3.0)	Contenu en haut de la liste déroulante
pied de page (1.3.0)	Contenu en bas de la liste déroulante
préfixe	Sélectionner le contenu de l'en-tête du composant
vide	Liste sans options

Possibilités

paramètre	illustrer	taper	Valeur facultative	valeur par défaut
valeur	valeur de l'option	chaîne/numéro/objet	—	—
étiquette	L’étiquette de l’option si elle n’est pas définie, elle est par défaut la même que value	chaîne/numéro	—	—
options (1.2.0)	Options de regroupement	tableau	—	—
désactivé	S'il faut désactiver cette option	booléen	—	FAUX

Méthodes

nom de la méthode	illustrer	paramètre
se concentrer	Faire des commentaires et se concentrer	—
se brouiller	Faire perdre le focus à la saisie et masquer la liste déroulante	—