Tree

Display a set of data with hierarchies.

Basic usage

Basic tree structure.

:::demo

tree/basic

:::

Selectable

Used for node selection.

:::demo This example also shows how to load node data asynchronously.

tree/selectable

:::

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

:::

Custom leaf node in lazy mode

:::demo 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.

tree/custom-leaf

:::

Lazy loading multiple times ^(2.6.3)

:::demo 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.

tree/multiple-times-load

:::

Disabled checkbox

The checkbox of a node can be set as disabled.

:::demo 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.

tree/disabled

:::

Default expanded and default checked

Tree nodes can be initially expanded or checked

:::demo 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.

tree/default-state

:::

Checking tree nodes

:::demo 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.

tree/checking-tree

:::

Custom node content

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

:::demo 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.

tree/customized-node

:::

Custom node class

The class of tree nodes can be customized

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

tree/custom-node-class

:::

Tree node filtering

Tree nodes can be filtered

:::demo 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.

tree/filtering

:::

Accordion

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

:::demo

tree/accordion

:::

Draggable

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

:::demo

tree/draggable

:::

Tree API

Attributes

props

Exposes

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

Events

Slots

Type Declarations

interface RootTreeType {
  root: Ref<Node>
  // ...
}

// UnwrapRef<RootTreeType['root']> => Node
type Node = {
  canFocus: boolean
  checked: boolean
  childNodes: Node[]
  data: TreeNodeData
  expanded: boolean
  id: number
  indeterminate: boolean
  isCurrent: boolean
  isEffectivelyChecked: boolean
  isLeaf?: boolean
  isLeafByUser?: boolean
  level: number
  loaded: boolean
  loading: boolean
  parent: Node | null
  store: TreeStore
  text: string | null
  visible: boolean
}

// TreeNodeData => Tree / TreeOptionProps
// Tree type is your prop type.
// TreeOptionProps is default prop type
interface TreeOptionProps {
  children?: string
  label?: string | ((data: TreeNodeData, node: Node) => string)
  disabled?: string | ((data: TreeNodeData, node: Node) => boolean)
  isLeaf?: string | ((data: TreeNodeData, node: Node) => boolean)
  class?: (
    data: TreeNodeData,
    node: Node
  ) => string | { [key: string]: boolean }
}