wl vue select
1.0.0
Cuadro desplegable de árbol y cuadro desplegable normal con todas las selecciones para vue framework.
Cuadro desplegable de árbol para vue framework y cuadro desplegable normal con seleccionar todo.
Este componente proporciona funciones de cuadros desplegables de árbol y cuadros desplegables para seleccionar todo.
wlVueSelect es un cuadro desplegable encapsulado secundario basado en el componente el-select de elementUi, que proporciona funciones de selección total y funciones de selección predeterminadas;
wlTreeSelect es un cuadro desplegable encapsulado secundario basado en el componente el-tree de elementUi, que proporciona soporte de datos de árbol y funciones de selección predeterminadas;
Debido a que estas dos necesidades son muy comunes, se lanzan como un complemento independiente.
el-seleccionar
0.4.8 Se solucionó el problema de que el nodo principal no se puede cancelar cuando todos los nodos secundarios están seleccionados en el cuadro desplegable del árbol.
npm i wl-vue-select --save
o
npm i wl-vue-select -S
usar
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)
}
},
| número de serie | parámetro | ilustrar | tipo | Valor opcional | valor predeterminado |
|---|---|---|---|---|---|
| 1 | datos | opciones lista opcional datos | Formación | - | - |
| 2 | accesorios | Elementos de configuración: el campo de etiqueta que muestra el nombre y el campo de valor que vincula el valor | Objeto | - | { etiqueta: "etiqueta", valor: "valor" } |
| 3 | mostrarTotal | Mostrar la opción全选cuando haya más de unas pocas opciones disponibles | Número | - | 1 |
| 4 | selección predeterminada[obsoleto] | Ya sea para habilitar la selección predeterminada, si全部está habilitado, se seleccionarán todos, si no todos, se seleccionará el primero. (No asigne un valor inicial al modelo v cuando habilite esta función) | Booleano | - | FALSO |
| 5 | otro | Otros parámetros proporcionados por el-select | - | - | - |
| 6 | clave de nodo | Al utilizar el cuadro desplegable del árbol, debe utilizar la clave para analizar los datos. | Cadena | - | IDENTIFICACIÓN |
| 7 | seleccionado[obsoleto] | Cuando utilice el cuadro desplegable del árbol, vincule los datos seleccionados [ahora cambiado a modelo v] | Objeto-matriz-de-números-de-cadena | - | - |
| 8 | caja | Al utilizar el cuadro desplegable del árbol, si se debe habilitar la selección múltiple | Booleano | - | FALSO |
| 9 | ancho | Ancho cuando se utiliza el cuadro desplegable de árbol, la unidad predeterminada es px | Número de cadena | - | 240 |
| 10 | hoja | En un cuadro desplegable de árbol, si solo se pueden seleccionar nodos de hoja | Booleano | - | FALSO |
| 11 | desencadenar | Cuando se utiliza el cuadro desplegable del árbol, el método de activación | Cadena | hacer clic/enfocar/desplazar/manual | hacer clic |
| 12 | modelo v | Los valores de enlace del cuadro desplegable normal y de árbol se utilizan de la misma manera que los elementos de formulario ordinarios. | Objeto-matriz-de-números-de-cadena | - | - |
| 13 | desactivado | Si se debe desactivar el cuadro desplegable | Booleano | - | FALSO |
| 14 | ahorarap | Si no se permite que se muestren varias líneas. Si es verdadero, solo se mostrará una línea. | Booleano | - | FALSO |
| 15 | nomarcadoCerrar | Cuando se realizan varias selecciones, si se debe cerrar automáticamente el área de opciones cuando todas están deseleccionadas | Booleano | - | FALSO |
| 16 | tamaño | El tamaño, el uso es el mismo que el de elementui. | Cadena | - | medio |
| 17 | predeterminadoExpandir todo | En forma de árbol, si se deben expandir todas las opciones de forma predeterminada | Booleano | - | verdadero |
| 18 | claves expandidas predeterminadas | En forma de árbol, las claves de nodo se expanden de forma predeterminada. | Formación | - | - |
| 19 | filtrable | Si se debe habilitar la función de búsqueda (al agregar un cuadro desplegable de árbol, tiene la misma función que un cuadro desplegable normal) | Booleano | - | FALSO |
| 20 | filtroFnc | En la forma del árbol, opcionalmente puede personalizar la lógica de búsqueda. Si no se aprueba, la búsqueda se basará en el campo correspondiente a la etiqueta en los accesorios. función (valor, datos) | Función | - | - |
| veintiuno | comprobarEstrictamente | En forma de árbol, si padre e hijo no están relacionados | Booleano | - | FALSO |
| Veintidós | expandirOnClickNode | En forma de árbol, si hacer clic en un nodo puede expandirlo o reducirlo | Booleano | - | FALSO |
| veintitrés | checkOnClickNode | Ya sea para seleccionar el nodo al hacer clic en el nodo, el valor predeterminado es falso, es decir, el nodo solo se seleccionará cuando se haga clic en la casilla de verificación | Booleano | - | FALSO |
| número de serie | nombre | ilustrar | parámetro |
|---|---|---|---|
| 1 | cerrarOpciones | Cierre el área de opciones del cuadro desplegable del árbol | - |
0.5.8 Configuración independiente de padres e hijos agregada en el cuadro desplegable del árbol
0.5.5 Se corrigió el error de lógica de selección automática cuando el valor de enlace inicial del cuadro desplegable del árbol es una matriz simple; se corrigió el estilo de centrado vertical;
0.5.4 Se solucionó el problema de que cuando se seleccionan inicialmente todos los datos, cada elemento aparece en el área de visualización en lugar de mostrar "todos" y se agrega la función de introducción del script.
0.5.3 Ajustar el nombre del componente a gran joroba; agregar una introducción bajo demanda;
0.5.2 Optimice el cuadro desplegable del árbol y agregue funciones de búsqueda y búsqueda personalizadas
0.5.1 Optimice el cuadro desplegable del árbol y las opciones muestran efectos excesivos
0.5.0 Se agregó el cuadro desplegable de árbol defaultExpandAll, campos defaultExpandedKeys
0.4.9 Agregar el método closeOptions para cerrar el área de opciones del cuadro desplegable del árbol
0.4.8 Se solucionó el problema de que el nodo principal no se puede cancelar cuando todos los nodos secundarios están seleccionados en el cuadro desplegable del árbol.
0.4.7 Optimice el cuadro desplegable del árbol y admita las etiquetas de colapso de el-select
0.4.6 Optimice el cuadro desplegable del árbol y haga efectivo el atributo de tamaño
0.4.5 Optimice el marcador de posición del cuadro desplegable del árbol y agregue administración de parámetros para cerrar la opción cuando todos estén deseleccionados.
0.4.2 Optimice el cuadro desplegable del árbol y agregue si no se permiten varias filas de campos.
0.4.1 Optimice el cuadro desplegable del árbol y agregue campos deshabilitados
0.3.9 Optimice el cuadro desplegable del árbol para extraer la identificación de forma predeterminada cuando los datos seleccionados pasados son una matriz compleja;
0.3.8 Se solucionó el problema de que cuando el cuadro desplegable del árbol está seleccionado de forma múltiple, solo se borra el área de visualización, pero la casilla de verificación del árbol no se borra cuando los datos están vacíos.
0.3.7 Modifique si se seleccionan solo nodos secundarios de acuerdo con el campo de hoja al seleccionar el cuadro desplegable del árbol.
0.3.5 Se corrigió el defecto de la selección predeterminada en la selección de radio del cuadro desplegable del árbol [cuando el valor vinculado es una matriz]
0.3.4 Se solucionó el problema de que el campo seleccionado predeterminado del cuadro desplegable del árbol el-tree está vacío y el método getNodes también puede obtener el último valor del ejemplo de radme actualizado.
0.3.3 Se solucionó el problema del bucle infinito cuando la selección múltiple está habilitada en el cuadro desplegable del árbol y optimizó el campo
leafpara determinar si se deben devolver solo nodos de hoja cuando la selección múltiple está habilitada.
0.3.2 Optimice el problema de que el cuadro desplegable del árbol no se muestra cuando se extiende horizontalmente
0.3.0 Optimice el cuadro desplegable del árbol y agregue un campo de modo de visualización de activación
0.2.7 Al optimizar la selección única del cuadro desplegable del árbol, se agrega el nivel opcional y se agrega
leafpara establecer si solo se pueden seleccionar nodos de hoja. Cuando se optimiza la selección única del árbol, se resalta. efecto cuando el tipo de objeto está seleccionado por defecto
0.2.5 Optimice el algoritmo de filtrado del cuadro desplegable del árbol, optimice el cuadro desplegable del árbol para aumentar el efecto de desplazamiento cuando las opciones disponibles son demasiado largas
0.2.4 Se solucionó el problema del vacío cuando showTotal es mayor que la longitud de los datos.
0.2.3 Ejemplo actualizado
0.2.2 Cuadro desplegable Agregar árbol
0.1.2 Algoritmo de actualización, no es necesario cancelar manualmente la opción Seleccionar todo al cambiar de toda la selección a una sola selección.
0.1.0 se lanza por primera vez, agregando seleccionar todo y funciones de selección predeterminadas basadas en el-select.
