Tree

Muestra un conjunto de datos jerárquicos.

Uso básico

Estructura básica de árbol.

Level one 1

Level one 2

Level one 3

Seleccionable

Usado para la selección de nodos.

Este ejemplo también muestra como cargar los datos de forma asíncrona.

Root1

Root2

WARNING

When using show-checkbox, since check-on-click-leaf is true by default, last tree children's can be checked by clicking their nodes.

Nodos hoja en modo perezoso (lazy load)

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.

region

Lazy loading multiple times 2.6.3

When lazily loading node data remotely, lazy loading may sometimes fail. In this case, you can call reject to keep the node status as is and allow remote loading to continue.

region

Checkbox desactivados

El checkbox de un nodo se puede poner como desactivado.

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.

Level one 1

Desplegado o seleccionado por defecto

Los nodos pueden estar desplegados o seleccionados por defecto.

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.

Seleccionando nodos

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.

vue

<template>
  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    :data="data"
    show-checkbox
    default-expand-all
    node-key="id"
    highlight-current
    :props="defaultProps"
  />

  <div class="mt-2">
    <el-button @click="getCheckedNodes">get by node</el-button>
    <el-button @click="getCheckedKeys">get by key</el-button>
    <el-button @click="setCheckedNodes">set by node</el-button>
    <el-button @click="setCheckedKeys">set by key</el-button>
    <el-button @click="resetChecked">reset</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { RenderContentContext, TreeInstance } from 'element-plus'

interface Tree {
  id: number
  label: string
  children?: Tree[]
}
type Node = RenderContentContext['node']

const treeRef = ref<TreeInstance>()

const getCheckedNodes = () => {
  console.log(treeRef.value!.getCheckedNodes(false, false))
}
const getCheckedKeys = () => {
  console.log(treeRef.value!.getCheckedKeys(false))
}
const setCheckedNodes = () => {
  treeRef.value!.setCheckedNodes(
    [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 9,
        label: 'Level three 1-1-1',
      },
    ] as Node[],
    false
  )
}
const setCheckedKeys = () => {
  treeRef.value!.setCheckedKeys([3], false)
}
const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false)
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

const data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
</script>

Contenido personalizado en los nodos

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

Hay dos maneras de personalizar la plantilla para los nodos de árbol: render-content y 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 funciones de renderizado. Si prefiere scoped slot, tendrá acceso a los nodos y datos en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Ten en cuenta que la demo de render-content no puede ejecutarse en JSFiddle porque no soporta la sintaxis JSX. En un proyecto real render-content funcionará si las dependencias son configuradas correctamente.

vue

<template>
  <div class="custom-tree-container">
    <p>Using render-content</p>
    <el-tree
      style="max-width: 600px"
      :data="dataSource"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent"
    />
    <p>Using scoped slot</p>
    <el-tree
      style="max-width: 600px"
      :data="dataSource"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <span>{{ node.label }}</span>
          <div>
            <el-button type="primary" link @click="append(data)">
              Append
            </el-button>
            <el-button
              style="margin-left: 4px"
              type="danger"
              link
              @click="remove(node, data)"
            >
              Delete
            </el-button>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton } from 'element-plus'

import type { RenderContentContext, RenderContentFunction } from 'element-plus'

interface Tree {
  id: number
  label: string
  children?: Tree[]
}
type Node = RenderContentContext['node']
type Data = RenderContentContext['data']

let id = 1000

const append = (data: Data) => {
  const newChild = { id: id++, label: 'testtest', children: [] }
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
  dataSource.value = [...dataSource.value]
}

const remove = (node: Node, data: Data) => {
  const parent = node.parent
  const children: Tree[] = parent?.data.children || parent?.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 1)
  dataSource.value = [...dataSource.value]
}

const renderContent: RenderContentFunction = (h, { node, data }) => {
  return h(
    'div',
    {
      class: 'custom-tree-node',
    },
    [
      h('span', null, node.label),
      h('div', null, [
        h(
          ElButton,
          {
            type: 'primary',
            link: true,
            onClick: () => append(data),
          },
          'Append '
        ),
        h(
          ElButton,
          {
            type: 'danger',
            link: true,
            style: 'margin-left: 4px',
            onClick: () => remove(node, data),
          },
          'Delete'
        ),
      ]),
    ]
  )
}

const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

Clase de nodo personalizado

La clase de nodos de árbol puede ser personalizada

. Usa props.class para construir un nombre de clase de nodos.

Filtrado de nodos

Los nodos del árbol se pueden filtrar.

Invoque el método filter de la instancia de Tree para filtrar los nodos. Su parámetro 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.

Level one 1

Level two 1-1

Level three 1-1-1

Level three 1-1-2

Level one 2

Level two 2-1

Level two 2-2

Level one 3

Level two 3-1

Level two 3-2

Acordeón

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

Level one 1

Level one 2

Level one 3

Arrastrable

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

Level one 1

Level two 1-1

Level three 1-1-1

Level one 2

Level two 2-1

Level three 2-1-1

Level two 2-2

Level three 2-2-1

Level one 3

Level two 3-1

Level three 3-1-1

Level two 3-2

Level three 3-2-1

vue

<template>
  <el-tree
    style="max-width: 600px"
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    :data="data"
    draggable
    default-expand-all
    node-key="id"
    @node-drag-start="handleDragStart"
    @node-drag-enter="handleDragEnter"
    @node-drag-leave="handleDragLeave"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
  />
</template>

<script lang="ts" setup>
// eslint-disable-next-line no-restricted-imports
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type {
  AllowDropType,
  NodeDropType,
  RenderContentContext,
} from 'element-plus'

type Node = RenderContentContext['node']

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log('drag start', node)
}
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag enter:', dropNode.label)
}
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log('tree drag leave:', dropNode.label)
}
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log('tree drag over:', dropNode.label)
}
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('tree drag end:', dropNode && dropNode.label, dropType)
}
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log('tree drop:', dropNode.label, dropType)
}
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === 'Level two 3-1') {
    return type !== 'inner'
  } else {
    return true
  }
}
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes('Level three 3-1-1')
}

const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
</script>

Atributos

Nombre	Descripción	Tipo	Por defecto
data	Datos del árbol	`object`	—
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`	—
render-content	Función de renderizado para los nodos	`Function`	—
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
check-on-click-leaf 2.9.6	whether to check or uncheck node when clicking on leaf node (last children).	`boolean`	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	`object`	—
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	`object`	—
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`	—
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`	—
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`	—

props

Atributos	Descripción	Tipo	Por defecto
label	Especifica que clave del objecto nodo se utilizará como label	`string` / `Function`	—
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`	—
isLeaf	elimina un nodo, solo funciona si `node-key` está asignado	`string` / `Function`	—
class	nombre de clase de nodo personalizado	`string` / `Function`	—

Método

Tree has the following method, which returns the currently selected array of nodes.

Method	Descripción	Parámetros
filter	filter all tree nodes, filtered nodes will be hidden	Accept a parameter which will be used as first parameter for filter-node-method
updateKeyChildren	set new data to node, only works when `node-key` is assigned	(key, data) Accept two parameters: 1. key of node 2. new data
getCheckedNodes	If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes	(leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. 2. default value is `false`. If the parameter is `true`, the return value contains halfchecked nodes
setCheckedNodes	set certain nodes to be checked, only works when `node-key` is assigned	an array of nodes to be checked
getCheckedKeys	If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys	(leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes.
setCheckedKeys	set certain nodes to be checked, only works when `node-key` is assigned	(keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean parameter. If set to `true`, only the checked status of leaf nodes will be set. The default value is `false`.
setChecked	set node to be checked or not, only works when `node-key` is assigned	(key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not.
getHalfCheckedNodes	If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes	—
getHalfCheckedKeys	If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys	—
getCurrentKey	return the highlight node's key (null if no node is highlighted)	—
getCurrentNode	return the highlight node's data (null if no node is highlighted)	—
setCurrentKey	set highlighted node by key, only works when `node-key` is assigned	(key, shouldAutoExpandParent=true) 1. the node's key to be highlighted. If `null`, cancel the currently highlighted node 2. whether to automatically expand parent node
setCurrentNode	set highlighted node, only works when `node-key` is assigned	(node, shouldAutoExpandParent=true) 1. the node to be highlighted 2. whether to automatically expand parent node
getNode	get node by data or key	(data) the node's data or key
remove	remove a node, only works when node-key is assigned	(data) the node's data or node to be deleted
append	append a child node to a given node in the tree	(data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node
insertBefore	insert a node before a given node in the tree	(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node
insertAfter	insert a node after a given node in the tree	(data, refNode) 1. node's data to be inserted 2. reference node's data, key or node

Eventos

Nombre	Descripción	Parameters
node-click	triggers when a node is clicked	four parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself, event object
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	triggers when the selected state of the node changes	three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes
check	triggers after clicking the checkbox of a node	two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys
current-change	triggers when current node changes	two parameters: node object corresponding to the current node, `node` property of TreeNode
node-expand	triggers when current node open	three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself
node-collapse	triggers when current node close	three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself
node-drag-start	triggers when dragging starts	two parameters: node object corresponding to the dragging node, event.
node-drag-enter	triggers when the dragging node enters another node	three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event.
node-drag-leave	triggers when the dragging node leaves a node	three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.
node-drag-over	triggers when dragging over a node (like mouseover event)	three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.
node-drag-end	triggers when dragging ends	four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be `undefined`), node drop type (before / after / inner), event.
node-drop	triggers after the dragging node is dropped	four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event.