> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Tree Component

> Documentation for the Tree component. Learn about its data structure, expand/collapse behavior, checkbox linkage, and other properties and events. Ideal for displaying and manipulating hierarchical data.

## When to Use

* Use the Tree component to display large volumes of hierarchical data. Its expand/collapse and linked-selection interactions make the data easy to manipulate.

## Component Example

## Component Properties

| Property              | Description                                                                                                                                                                                                          | Type                                                                 | Default                                                                                                                                                                                                                                                                                                                                                                       |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `canDrop`             | Event triggered to determine whether a node can serve as the drop target.                                                                                                                                            | `(info: any) => boolean`                                             | -                                                                                                                                                                                                                                                                                                                                                                             |
| `checkStrictly`       | Makes the checkboxes fully controlled.                                                                                                                                                                               | `boolean`                                                            | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `checkStrictly`       | Defines how selected nodes are returned. `all`: returns all selected nodes. `parent`: returns only the parent node when all children are selected. `child`: returns only child nodes when all children are selected. | `'all' \| 'parent' \| 'child'`                                       | `'parent'`                                                                                                                                                                                                                                                                                                                                                                    |
| `checkStrictly`       | Makes the checkboxes fully controlled.                                                                                                                                                                               | `boolean`                                                            | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `checkable`           | Whether to display checkboxes.                                                                                                                                                                                       | `boolean`                                                            | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `checkedKeys`         | Nodes selected by default.                                                                                                                                                                                           | `string[]`                                                           | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `checkedKeys`         | Nodes checked by default.                                                                                                                                                                                            | `string[]`                                                           | `["0-0-0"]`                                                                                                                                                                                                                                                                                                                                                                   |
| `dataSource`          | Node data.                                                                                                                                                                                                           | [TreeDataSource\[\]](/open/yida/components/interface#treedatasource) | `[ { key: "0-0", label: "0-0", children: [ { key: "0-0-0", label: "0-0-0", children: [ { key: "0-0-0-0", label: "0-0-0-0", children: [ { key: "0-0-0-0-0", label: "0-0-0-0-0", }, ], }, { key: "0-0-0-1", label: "0-0-0-1", }, ], }, { key: "0-0-1", label: "0-0-1", children: [ { key: "0-0-1-0", label: "0-0-1-0", }, { key: "0-0-1-1", label: "0-0-1-1", }, ], }, ], }, ]` |
| `defaultExpandAll`    | Expand all nodes by default.                                                                                                                                                                                         | `boolean`                                                            | `true`                                                                                                                                                                                                                                                                                                                                                                        |
| `defaultExpandedKeys` | Nodes expanded by default.                                                                                                                                                                                           | `string[]`                                                           | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `draggable`           | Whether dragging is supported.                                                                                                                                                                                       | `boolean`                                                            | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `editable`            | Whether editing is supported.                                                                                                                                                                                        | `boolean`                                                            | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `expandedKeys`        | Expanded nodes.                                                                                                                                                                                                      | `string[]`                                                           | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `isLoadData`          | Whether to enable asynchronous loading.                                                                                                                                                                              | `boolean`                                                            | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `loadData`            | Event triggered during asynchronous loading.                                                                                                                                                                         | `(data: TreeDataSource) => Promise<TreeDataSource[]>`                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `multiple`            | Whether multiselect is supported.                                                                                                                                                                                    | `boolean`                                                            | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `onCheck`             | Event triggered when a checkbox is selected or cleared.                                                                                                                                                              | `(checkedKeys: string[], extra: any) => void`                        | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragEnd`           | Event triggered when dragging ends.                                                                                                                                                                                  | `(info: any) => void`                                                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragEnter`         | Event triggered when a dragged node enters the target node.                                                                                                                                                          | `(info: any) => void`                                                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragLeave`         | Event triggered when a dragged node leaves the target node.                                                                                                                                                          | `(info: any) => void`                                                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragOver`          | Event triggered when a dragged node moves over the target node.                                                                                                                                                      | `(info: any) => void`                                                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragStart`         | Event triggered when dragging a node starts.                                                                                                                                                                         | `(info: any) => void`                                                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDrop`              | Event triggered when a dragged node is dropped inside, before, or after the target node.                                                                                                                             | `(info: any) => void`                                                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onEditFinish`        | Event triggered when editing of a node's content is complete.                                                                                                                                                        | `(key: string, label: string, node: TreeDataSource) => void`         | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onExpand`            | Event triggered when a node is expanded or collapsed.                                                                                                                                                                | `(expandedKeys: string[], extra: any) => void`                       | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onSelect`            | Event triggered when a node is selected or deselected.                                                                                                                                                               | `(selectedKeys: string[], extra: any) => void`                       | -                                                                                                                                                                                                                                                                                                                                                                             |
| `processDataSource`   | Data preprocessing function.                                                                                                                                                                                         | `(data: any) => TreeDataSource[]`                                    | -                                                                                                                                                                                                                                                                                                                                                                             |
| `selectable`          | Whether nodes can be selected.                                                                                                                                                                                       | `boolean`                                                            | `true`                                                                                                                                                                                                                                                                                                                                                                        |
| `selectedKeys`        | Nodes selected by default.                                                                                                                                                                                           | `string[]`                                                           | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `showLine`            | Whether to display connecting lines between nodes.                                                                                                                                                                   | `boolean`                                                            | `true`                                                                                                                                                                                                                                                                                                                                                                        |