## Tree
Muestra un conjunto de datos jerárquicos.
### Uso básico
Estructura básica de árbol.
:::demo
```html
```
:::
### Seleccionable
Usado para la selección de nodos.
:::demo Este ejemplo también muestra como cargar los datos de forma asíncrona.
```html
```
:::
### Nodos hoja en modo perezoso
:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
```html
```
:::
### Checkbox desactivados
El checkbox de un nodo se puede poner como desactivado.
:::demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
```html
```
:::
### Desplegado o seleccionado por defecto
Los nodos pueden estar desplegados o seleccionados por defecto.
:::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
```html
```
:::
### Seleccionando nodos
:::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
```html
get by node
get by key
set by node
set by key
reset
```
:::
### Contenido personalizado en los nodos
El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
:::demo There are two ways to customize template for tree nodes: `render-content` and scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. If you prefer scoped slot, you'll have access to `node` and `data` in the scope, standing for the TreeNode object and node data of the current node respectively. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
```html
Using scoped slot
{{ node.label }}
Append
Delete
```
:::
### Filtrado de nodos
Los nodos del árbol se pueden filtrar.
:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
```html
```
:::
### Acordeón
Solo puede ser expandido un nodo del mismo nivel a la vez.
:::demo
```html
```
:::
### Atributos
| Atributo | 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) | — | — |
| 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 | — | true | - |
| 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 seleccion 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 | — | — |
| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | 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 | — | 16 |
### props
| Atributo | 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, function(data, node) | — | — |
| isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — |
### Métodos
`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
| Método | Descripción | Parámetros |
| ----------------- | ---------------------------------------- | ---------------------------------------- |
| filter | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato |
| getCheckedNodes | Si los nodos puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos seleccionados | Acepta un booleano cuyo valor por defecto es `false` |
| setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar |
| getCheckedKeys | 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`. |
| setCheckedKeys | Establece algunos nodos como seleccionados, solo si `node-key` está asignado | (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados |
| setChecked | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad |
| getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — |
| getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — |
| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado |
| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado |
| getNode | get node by data or key | (data) the node's data or key |
| remove | remove a node | (data) the node's data or node to be delete |
| append | append a child node for a node in tree | (data, parentNode) Accept two parameters: 1. child node's data 2. parent node's data, key or node |
| insertBefore | insert a node before a node in tree | (data, refNode) (data, parentNode) Accept two parameters: 1. sibling node's data 2. reference node's data, key or node |
| insertAfter | insert a node after a node in tree | (data, refNode) 1. sibling node's data 2. reference node's data, key or node |
### Eventos
| Nombre del evento | Descripción | Parámetros |
| ----------------- | ---------------------------------------- | ---------------------------------------- |
| node-click | se lanza cuando un nodo es pinchado | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
| node-contextmenu | triggers when a node is clicked by right button | four parameters: event, node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
| check-change | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
| current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
| node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
| node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |
### Scoped slot
| name | Description |
|------|--------|
| — | Custom content for tree nodes. The scope parameter is { node, data } |