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

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="buttons">
    <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 { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'

interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const treeRef = ref<InstanceType<typeof ElTree>>()

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 }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <a @click="append(data)"> Append </a>
            <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'

interface Tree {
  id: number
  label: string
  children?: Tree[]
}
let id = 1000

const append = (data: Tree) => {
  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: Tree) => {
  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 = (
  h,
  {
    node,
    data,
    store,
  }: {
    node: Node
    data: Tree
    store: Node['store']
  }
) => {
  return h(
    'span',
    {
      class: 'custom-tree-node',
    },
    h('span', null, node.label),
    h(
      'span',
      null,
      h(
        'a',
        {
          onClick: () => append(data),
        },
        'Append '
      ),
      h(
        'a',
        {
          style: 'margin-left: 8px',
          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>
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type {
  AllowDropType,
  NodeDropType,
} from 'element-plus/es/components/tree/src/tree.type'

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	Props	—
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
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 tiene los siguientes métodos, que devuelven el array de nodos seleccionados.

Method	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.