el select v2
1.4.6
Componente selector de lista virtual basado en Element UI para la versión Vue 2.
Demostración en línea
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
| 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 |
| 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) |
| 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 |
| 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 |
| 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 | — |