Árbol virtualizado V2^beta

Vista del árbol con un rendimiento de desplazamiento rápido para cualquier cantidad de datos

Uso básico

Estructura básica de árbol.

Seleccionable

Usado para la selección de nodos.

Checkbox desactivados

El checkbox de un nodo se puede poner como desactivado.

Desplegado o seleccionado por defecto

Los nodos pueden estar desplegados o seleccionados por defecto.

Contenido personalizado en los nodos

El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.

Filtrado de nodos

Los nodos del árbol se pueden filtrar.

Atributos del Árbol V2

Nombre	Descripción	Tipo	Por defecto
data	Datos del árbol	array	—
empty-text	Texto a mostrar cuando data es void	string	—
props	Opciones de configuración	object	—
highlight-current	Si el nodo actual está resaltado	boolean	false
expand-on-click-node	Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha	boolean	true
check-on-click-node	Si es `false`, el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación.	boolean	false
default-expanded-keys	Array de claves de los nodos expandidos inicialmente	array	—
show-checkbox	Si un nodo es seleccionable	boolean	false
check-strictly	El estado de selección de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true`	boolean	false
default-checked-keys	Array con claves de los nodos seleccionados inicialmente	array	—
current-node-key	la clave del nodo inicialmente seleccionado	string / number	—
filter-method	esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado.	Function(value, data)	—
indent	Indentación horizontal de los nodos en niveles adyacentes, en pixeles	number	16
icon	icono de nodo de árbol personalizado	`string \| Component`	-
item-size 2.2.33	altura del nodo de árbol personalizado	number	26

Props

Atributos	Descripción	Tipo	Por defecto
value	Identificador único en todo el árbol para los nodos	string, number	id
label	especifica qué clave del objeto del nodo se utiliza como label	string	label
children	Especifica que objeto del nodo se utiliza como subárbol	string	children
disabled	Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado	string	disabled

Métodos del Árbol V2

Tree tiene los siguientes métodos, que devuelven el array de nodos seleccionados.

Método	Descripción	Parámetros
filter	Esta función se ejecutará en cada nodo cuando se use el método filtrar, si devuelve `false` el nodo se oculta	`(query: string)`
getCheckedNodes	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos actualmente seleccionado	`(leafOnly: boolean)`
getCheckedKeys	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de claves de nodo seleccionados	`(leafOnly: boolean)`
setCheckedKeys	establecer ciertos nodos para ser verificados	`(keys: TreeKey[])`
setChecked	establecer nodo a ser comprobado o no	`(key: TreeKey, checked: boolean)`
setExpandedKeys	expandir ciertos nodos	`(keys: TreeKey[])`
getHalfCheckedNodes	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos actualmente medio seleccionado	-
getHalfCheckedKeys	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de claves de nodos actualmente medio seleccionados	-
getCurrentKey	retorna la clave del nodo destacado (indefinido si ningún nodo está resaltado)	-
getCurrentNode	devolver los datos del nodo resaltado (indefinido si ningún nodo está resaltado)	-
setCurrentKey	establece nodo destacado por clave	`(key: TreeKey)`
getNode	obtiene nodo por clave o datos	`(data: TreeKey \| TreeNodeData)`
expandNode	expandir nodo especificado	`(node: TreeNode)`
collapseNode	contraer nodo especificado	`(node: TreeNode)`
setData	Cuando los datos son muy grandes, el uso de datos reactivos causará un mal rendimiento, por lo que proporcionamos una forma de evitar esta situación	`(data: TreeData)`

Eventos del Árbol V2

Nombre	Descripción	Parámetros
node-click	Filtra los nodos del árbol, los nodos filtrados estarán ocultos	`(data: TreeNodeData, node: TreeNode, e: MouseEvent)`
node-contextmenu	Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado	`(e: Event, data: TreeNodeData, node: TreeNode)`
check-change	si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos actualmente seleccionada.	`(data: TreeNodeData, checked: boolean)`
check	Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado	`(data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,})`
current-change	Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados	`(data: TreeNodeData, node: TreeNode)`
node-expand	Establece algunos nodos como seleccionados, solo si `node-key` está asignado	`(data: TreeNodeData, node: TreeNode)`
node-collapse	Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado	`(data: TreeNodeData, node: TreeNode)`