el select v2

Seleccione el selector de lista virtual V2

Componente selector de lista virtual basado en Element UI para la versión Vue 2.

Demostración en línea

Demostración en línea

Instrucciones de uso

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 >

Código de muestra

Código de muestra

Seleccionar atributos

parámetro	ilustrar	tipo	Valor opcional	valor predeterminado
valor/modelo v	Valor vinculante	booleano/cadena/número	—	—
opciones	Lista de datos	formación	—	—
clave de valor	nombre de clave de valor	cadena	—	valor
clave de etiqueta	nombre de la clave de la etiqueta	cadena	—	etiqueta
clave de opciones (1.4.6)	nombre de la clave de opciones	cadena	—	opciones
clave deshabilitada (1.4.1)	nombre de clave deshabilitada	cadena	—	desactivado
clave de objeto (1.4.0)	El nombre de la clave cuando el valor vinculado es un tipo de objeto	cadena	—	valor
tamaño mínimo del artículo	Altura mínima para cada opción.	número	—	34
múltiple	Ya sea para seleccionar varios	booleano	—	FALSO
desactivado	Si deshabilitar	booleano	—	FALSO
tamaño	Tamaño del cuadro de entrada	cadena	mediano/pequeño/mini	—
borrable	¿Es posible borrar opciones?	booleano	—	FALSO
etiquetas-colapso	Si se debe mostrar el valor seleccionado como texto al realizar selecciones múltiples	booleano	—	FALSO
límite múltiple	El número máximo de elementos que el usuario puede seleccionar al realizar selecciones múltiples. Si es 0, no hay límite.	número	—	0
nombre	atributo de nombre de la entrada seleccionada	cadena	—	—
autocompletar	atributo de autocompletar de entrada seleccionada	cadena	—	apagado
marcador de posición	marcador de posición	cadena	—	Por favor seleccione
filtrable	¿Se puede buscar?	booleano	—	FALSO
permitir-crear	Si los usuarios pueden crear nuevas entradas debe usarse con filterable	booleano	—	FALSO
método de filtrado	Método de búsqueda personalizado	función	—	—
remoto	Si se trata de una búsqueda remota	booleano	—	FALSO
método remoto	Método de búsqueda remota	función	—	—
cargando	Si los datos se obtienen de forma remota	booleano	—	FALSO
texto de carga	Texto mostrado durante la carga remota	cadena	—	cargando
texto no coincidente	El texto que se muestra cuando ninguna condición de búsqueda coincide, también puede usar la configuración slot="empty"	cadena	—	No hay datos coincidentes
texto sin datos	El texto que se muestra cuando la opción está vacía también se puede configurar usando slot="empty"	cadena	—	Sin datos
clase popper	Seleccione el nombre de la clase del cuadro desplegable	cadena	—	—
palabra clave de reserva	Cuando se realiza selección múltiple y se pueden buscar, si se debe conservar la palabra clave de búsqueda actual después de seleccionar una opción	booleano	—	verdadero
primera opción predeterminada	Presione Entrar en el cuadro de entrada y seleccione la primera coincidencia. Necesita ser utilizado con filterable o remote	booleano	—	FALSO
popper-añadido-al-cuerpo	Ya sea para insertar el cuadro emergente en el elemento del cuerpo. Cuando hay un problema con la posición del cuadro emergente, puede establecer esta propiedad en falso	booleano	—	verdadero
menú desplegable automático	Para la selección que no permite búsquedas, si se debe abrir automáticamente el menú de opciones después de que el cuadro de entrada se enfoque	booleano	—	FALSO
ancho de entrada de ajuste (1.1.0)	Si el ancho del cuadro desplegable es el mismo que el del cuadro de entrada. Después de configurarlo en falso, el ancho se calculará automáticamente y se reducirá el rendimiento.	booleano	—	verdadero

Seleccionar eventos

nombre del evento	ilustrar	parámetros de devolución de llamada
cambiar	Se activa cuando el valor seleccionado cambia	Valor seleccionado actual
cambio visible	Se activa cuando el cuadro desplegable aparece/se oculta	Verdadero si aparece, falso si está oculto
eliminar etiqueta	Se activa cuando se elimina la etiqueta en modo de selección múltiple	Valor de etiqueta eliminado
claro	Se activa cuando el usuario hace clic en el botón borrar en modo de radio borrable	—
difuminar	Se activa cuando la entrada pierde el foco	(evento: evento)
enfocar	Se activa cuando la entrada recibe el foco	(evento: evento)

Seleccionar ranuras

nombre	ilustrar
—	Plantilla personalizada, el parámetro es {elemento}
encabezado (1.3.0)	Contenido en la parte superior de la lista desplegable
pie de página (1.3.0)	Contenido al final de la lista desplegable
prefijo	Seleccionar el contenido del encabezado del componente
vacío	Lista sin opciones

Opciones

parámetro	ilustrar	tipo	Valor opcional	valor predeterminado
valor	valor de la opción	cadena/número/objeto	—	—
etiqueta	La etiqueta de la opción. Si no se establece, el value	cadena/número	—	—
opciones (1.2.0)	Opciones de agrupación	formación	—	—
desactivado	Si deshabilitar esta opción	booleano	—	FALSO

Métodos

nombre del método	ilustrar	parámetro
enfocar	Hacer que las aportaciones se centren	—
difuminar	Haga que la entrada pierda el foco y oculte el cuadro desplegable	—