Tree Component - DingTalk Help Center

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[]	`[ { 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`