Tree

Display a set of data with hierarchies.

Basic usage

Basic tree structure.

Level one 1

Level one 2

Level one 3

Selectable

Used for node selection.

This example also shows how to load node data asynchronously.

Root1

Root2

Custom leaf node in lazy mode

A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.

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

Disabled checkbox

The checkbox of a node can be set as disabled.

In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.

Level one 1

Default expanded and default checked

Tree nodes can be initially expanded or checked

Use default-expanded-keys and default-checked-keys to set initially expanded and initially checked nodes respectively. Note that for them to work, node-key is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.

Checking tree nodes

This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, node-key is required.

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>

Custom node content

The content of tree nodes can be customized, so you can add icons or buttons as you will

There are two ways to customize template for tree nodes: render-content and scoped slot. Use render-content to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. 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. Note that the render-content demo can't run in JSFiddle because it doesn't support JSX syntax. In a real project, render-content will work if relevant dependencies are correctly configured.

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>

Custom node class

The class of tree nodes can be customized

. Use props.class to build class name of nodes.

Tree node filtering

Tree nodes can be filtered

Invoke the filter method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, filter-node-method is required, and its value is the filtering method.

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

Accordion

Only one node among the same level can be expanded at one time.

Level one 1

Level one 2

Level one 3

Draggable

You can drag and drop Tree nodes by adding a draggable attribute.

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>

Attributes

Name	Description	Type	Default
data	tree data	`object`	—
empty-text	text displayed when data is void	`string`	—
node-key	unique identity key name for nodes, its value should be unique across the whole tree	`string`	—
props	configuration options, see the following table	props	—
render-after-expand	whether to render child nodes only after a parent node is expanded for the first time	`boolean`	true
load	method for loading subtree data, only works when `lazy` is true	`Function`	—
render-content	render function for tree node	`Function`	—
highlight-current	whether current node is highlighted	`boolean`	false
default-expand-all	whether to expand all nodes by default	`boolean`	false
expand-on-click-node	whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon.	`boolean`	true
check-on-click-node	whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox.	`boolean`	false
auto-expand-parent	whether to expand father node when a child node is expanded	`boolean`	true
default-expanded-keys	array of keys of initially expanded nodes	`object`	—
show-checkbox	whether node is selectable	`boolean`	false
check-strictly	whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true`	`boolean`	false
default-checked-keys	array of keys of initially checked nodes	`object`	—
current-node-key	key of initially selected node	`string` / `number`	—
filter-node-method	this function will be executed on each node when use filter method. if return `false`, tree node will be hidden.	`Function`	—
accordion	whether only one node among the same level can be expanded at one time	`boolean`	false
indent	horizontal indentation of nodes in adjacent levels in pixels	`number`	18
icon	custom tree node icon component	`string` / `Component`	—
lazy	whether to lazy load leaf node, used with `load` attribute	`boolean`	false
draggable	whether enable tree nodes drag and drop	`boolean`	false
allow-drag	this function will be executed before dragging a node. If `false` is returned, the node can not be dragged	`Function`	—
allow-drop	this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node)	`Function`	—

props

Attribute	Description	Type	Default
label	specify which key of node object is used as the node's label	`string` / `Function`	—
children	specify which node object is used as the node's subtree	`string`	—
disabled	specify which key of node object represents if node's checkbox is disabled	`string` / `Function`	—
isLeaf	specify whether the node is a leaf node, only works when lazy load is enabled	`string` / `Function`	—
class	custom node class name	`string` / `Function`	—

Method

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

Method	Description	Parameters
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

Events

Name	Description	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.