Tree 树形控件 - DingTalk Help Center

何时使用

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

组件示例

组件属性

属性	说明	类型	默认值
`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[]	`[ { 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`