> ## 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 树形控件

> Tree 树形控件使用文档，详解数据结构、展开收起、勾选联动等属性与事件，适合展示和操作具有层级关系的数据。

## 何时使用

* 适用于大量、具有层级关系的数据展示场景中，并且利用组件的展开收起和关联选中等交互可以方便地对数据进行操作处理。

## 组件示例

<iframe src="https://www.aliwork.com/developer/tree-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性                    | 说明                                                               | 类型                                                                      | 默认值                                                                                                                                                                                                                                                                                                                                                                           |
| --------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `canDrop`             | 节点是否可被作为目标节点时触发的事件                                               | `(info: any) => boolean`                                                | -                                                                                                                                                                                                                                                                                                                                                                             |
| `checkStrictly`       | 复选框完全受控                                                          | `boolean`                                                               | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `checkStrictly`       | 定义选中时回填的方式，all：返回所有选中节点、parent：父节点都选中时只返回父节点、child：父节点都选中时只返回子节点 | `'all' \| 'parent' \| 'child'`                                          | `'parent'`                                                                                                                                                                                                                                                                                                                                                                    |
| `checkStrictly`       | 复选框完全受控                                                          | `boolean`                                                               | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `checkable`           | 是否显示复选框                                                          | `boolean`                                                               | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `checkedKeys`         | 默认选中节点                                                           | `string[]`                                                              | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `checkedKeys`         | 默认勾选节点                                                           | `string[]`                                                              | `["0-0-0"]`                                                                                                                                                                                                                                                                                                                                                                   |
| `dataSource`          | 节点数据                                                             | [TreeDataSource\[\]](/zh/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`    | 默认展开所有节点                                                         | `boolean`                                                               | `true`                                                                                                                                                                                                                                                                                                                                                                        |
| `defaultExpandedKeys` | 默认展开的节点                                                          | `string[]`                                                              | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `draggable`           | 是否支持拖拽                                                           | `boolean`                                                               | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `editable`            | 是否支持编辑                                                           | `boolean`                                                               | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `expandedKeys`        | 展开的节点                                                            | `string[]`                                                              | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `isLoadData`          | 是否开启异步加载                                                         | `boolean`                                                               | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `loadData`            | 异步加载时触发的事件                                                       | `(data: TreeDataSource) => Promise<TreeDataSource[]>`                   | -                                                                                                                                                                                                                                                                                                                                                                             |
| `multiple`            | 是否支持多选                                                           | `boolean`                                                               | `false`                                                                                                                                                                                                                                                                                                                                                                       |
| `onCheck`             | 勾选或取消勾选复选框时触发的事件                                                 | `(checkedKeys: string[], extra: any) => void`                           | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragEnd`           | 拖拽结束时触发的事件                                                       | `(info: any) => void`                                                   | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragEnter`         | 拖拽节点进入目标时触发的事件                                                   | `(info: any) => void`                                                   | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragLeave`         | 拖拽节点离开目标节点时触发的事件                                                 | `(info: any) => void`                                                   | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragOver`          | 拖拽节点在目标节点上移动时触发的事件                                               | `(info: any) => void`                                                   | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDragStart`         | 开始拖拽节点时触发的事件                                                     | `(info: any) => void`                                                   | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onDrop`              | 拖拽节点放入目标节点内或前后触发的事件                                              | `(info: any) => void`                                                   | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onEditFinish`        | 编辑节点内容完成时触发的事件                                                   | `(key: string, label: string, node: TreeDataSource) => void`            | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onExpand`            | 展开收起节点时触发的事件                                                     | `(expandedKeys: string[], extra: any) => void`                          | -                                                                                                                                                                                                                                                                                                                                                                             |
| `onSelect`            | 选中或取消选中节点时触发的事件                                                  | `(selectedKeys: string[], extra: any) => void`                          | -                                                                                                                                                                                                                                                                                                                                                                             |
| `processDataSource`   | 数据预处理函数                                                          | `(data: any) => TreeDataSource[]`                                       | -                                                                                                                                                                                                                                                                                                                                                                             |
| `selectable`          | 是否支持选中                                                           | `boolean`                                                               | `true`                                                                                                                                                                                                                                                                                                                                                                        |
| `selectedKeys`        | 默认选中节点                                                           | `string[]`                                                              | `['0-0-0']`                                                                                                                                                                                                                                                                                                                                                                   |
| `showLine`            | 是否显示节点连线                                                         | `boolean`                                                               | `true`                                                                                                                                                                                                                                                                                                                                                                        |