Tree

Muestra un conjunto de datos jerárquicos.

Uso básico

Estructura básica de árbol.

Seleccionable

Usado para la selección de nodos.

Nodos hoja en modo perezoso (lazy load)

Lazy loading multiple times 2.6.3

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.

Seleccionando nodos

Contenido personalizado en los nodos

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

Clase de nodo personalizado

La clase de nodos de árbol puede ser personalizada

Filtrado de nodos

Los nodos del árbol se pueden filtrar.

Acordeón

Solo puede ser expandido un nodo del mismo nivel a la vez.

Arrastrable

Puede arrastrar y soltar nodos de Tree añadiendo un atributo draggable .

Atributos

Nombre	Descripción	Tipo	Valores Aceptados	Por defecto
data	Datos del árbol	array	—	—
empty-text	Texto a mostrar cuando data es void	string	—	—
node-key	Identificador único en todo el árbol para los nodos	string	—	—
props	Opciones de configuración	object	—	—
render-after-expand	si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre	boolean	—	true
load	Método para cargar los datos de subárboles	function(node, resolve, reject)	—	—
render-content	Función de renderizado para los nodos	Function(h, `{ node, data, store }`)	—	—
highlight-current	Si el nodo actual está resaltado	boolean	—	false
default-expand-all	Expandir todos los nodos por defecto	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
auto-expand-parent	Expandir un nodo padre si el hijo está seleccionado	boolean	—	true
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-node-method	esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado.	Function(value, data, node)	—	—
accordion	Si solo un nodo de cada nivel puede expandirse a la vez	boolean	—	false
indent	Indentación horizontal de los nodos en niveles adyacentes, en pixeles	number	—	18
icon	componente de icono de nodo de árbol personalizado	`string \| Component`	-	-
lazy	si se trata de un nodo de hoja lazy load, utilizado con el atributo `load`	boolean	—	false
draggable	si se habilita la función de drag & drop en los nodos	boolean	—	false
allow-drag	esta función se ejecutará antes de arrastrar un nodo. Si se devuelve `false`, el nodo no puede ser arrastrado	Function(nodo)	—	—
allow-drop	esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino)	Function(Nodoquesearrastra, Nododestino, type)	—	—

Props

Atributos	Descripción	Tipo	Valores Aceptados	Por defecto
label	Especifica que clave del objecto nodo se utilizará como label	string, function(data, node)	—	—
children	Especifica que objeto del nodo se utiliza como subárbol	string	—	—
disabled	Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado	string, function(data, node)	—	—
isLeaf	elimina un nodo, solo funciona si `node-key` está asignado	string, function(data, node)	—	—
class	nombre de clase de nodo personalizado	string, function(data, node)	—	—

Método

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	Acepta un parámetro que será usado como primer parámetro para el método filter-node-method
updateKeyChildren	dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode	(key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato
getCheckedNodes	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos actualmente seleccionado	(leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. el valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados 2. el valor por defecto es `false`. Si el parámetro es `true`, el valor de retorno contiene nodos halfchecked.
setCheckedNodes	establecer ciertos nodos para ser verificados, solo funciona cuando `node-key` es asignado	un array de nodos a ser verificados
getCheckedKeys	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de claves de nodo seleccionados	(leafOnly) Acepta un parámetro de tipo booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados
setCheckedKeys	establece ciertos nodos para ser verificados, solo funciona cuando `node-key` es asignado	(keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un operador booleano. Si se establece a `true`, sólo se establecerá el estado comprobado de los nodos de hoja. El valor por defecto es `false`.
setChecked	establece nodo para ser comprobado o no, solo funciona cuando `node-key` es asignado	(key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un parámetro tipo booleano que indica chequeado o no. 3. un parámetro de tipo booleano que indica profundidad o no.
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 actual de los medio seleccionados en claves de nodo	-
getCurrentKey	devuelve el nodo por el dato o la clave	—
getCurrentNode	(data) los datos del nodo o nodo a borrar	—
setCurrentKey	establecer nodo resaltado por clave, solo funciona cuando `node-key` es asignado	(key, shouldAutoExpandParent=true) 1. la clave del nodo a ser resaltado. Si es `null`, cancela los nodos actualmente resaltados 2. whether to automatically expand parent node
setCurrentNode	establecer nodo resaltado, solo funciona cuando `node-key` es asignado	(node, shouldAutoExpandParent=true) 1. nodo a ser resaltado 2. si expandir automáticamente el nodo padre
getNode	(data) los datos o clave del nodo	(data) los datos o clave del nodo
remove	elimina un nodo, solo funciona cuando se asigna node-key	(data) los datos del nodo o el nodo a ser borrad
append	añadir un nodo hijo a un nodo determinado del árbol	(data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo
insertBefore	insertar un nodo antes de un nodo dado en el árbol	(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node
insertAfter	insertar un nodo después de un nodo dado en el árbol	(data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo

Eventos

Nombre	Descripción	Parámetros
node-click	Filtra los nodos del árbol, los nodos filtrados estarán ocultos	cuatro parámetros: objeto de nodo correspondiente al nodo pulsado, `node` propiedad de TreeNode, TreeNode en sí mismo, y el objeto del evento
node-contextmenu	Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado	cuatro parámetros: evento, el objeto nodo sobre el que se hizo clic, la propiedad `node` del TreeNode, el TreeNode en si mismo
check-change	si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos actualmente seleccionada.	tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si
check	Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado	Un array de nodos a seleccionar
current-change	Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados	(leafOnly) Acepta un booleano que por defecto es `false`.
node-expand	Establece algunos nodos como seleccionados, solo si `node-key` está asignado	tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si
node-collapse	Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado	tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si
node-drag-start	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de nodos actualmente seleccionada.	dos parámetros: el objeto del nodo que se arrastrara, evento.
node-drag-enter	Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de claves del nodo actualmente seleccionado.	tres parámetros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento.
node-drag-leave	devuelve la clave del nodo resaltado actualmente (null si no hay ninguno)	tres parámetros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento.
node-drag-over	devuelve los datos del nodo de resaltado (nulo si no hay ningún nodo resaltado)	tres parámetros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento.
node-drag-end	establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado	cuatro parámetros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integración (antes (before), después (after), dentro (inner) ), evento.
node-drop	establece el nodo resaltado, solo funciona si `node-key` está asignado	cuatro parámetros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integración (antes (before), después (after), dentro (inner) ), evento.

Slots

Nombre	Descripción
—	Contenido personalizado para nodos de tree. El parámetro del ámbito es `{ node, data }`
empty 2.3.4	puede personalizar el contenido cuando los datos están vacíos.