## 简介
结构树也可简称为树，常用于表现树状信息结构的场景，分支可以展开或折叠，也可以提供单选、多选、异步加载等复杂功能。
## 示例
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
const contentStyle = {
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: 36,
};
export default () => {
return (
);
};
export const meta = {
title: '默认',
describe: '分支节点形态。',
};
```
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
export default () => {
return (
);
};
export const meta = {
title: '基本树结构',
describe:
'通过 defaultSelectedKeys 属性设置默认选中项，通过 defaultExpandedKeys 属性设置默认展开项。',
};
```
```tsx
import React from 'react';
import { Tree } from '@alicloud/console-components';
const TreeNode = Tree.Node;
export default () => {
return (
);
};
export const meta = {
title: '线型树结构',
describe: '通过 showLine 属性设置为线性结构。',
};
```
```tsx
```
## API
### Tree
| 参数 | 说明 | 类型 | 默认值 | 是否必填 | 支持版本 |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- | -------- |
| children | 树节点 | React.ReactNode | - | | - |
| dataSource | 数据源，该属性优先级高于 children | TreeDataType\[] | - | | - |
| showLine | 是否显示树的线 | boolean | false | | - |
| selectable | 是否支持选中节点 | boolean | false | | - |
| selectedKeys | （用于受控）当前选中节点 key 的数组 | string\[] | - | | - |
| defaultSelectedKeys | （用于非受控）默认选中节点 key 的数组 | string\[] | \[] | | - |
| onSelect | 选中或取消选中节点时触发的回调函数
**签名**:
**参数**:
*selectedKeys*: 选中节点key的数组
*extra*: 额外参数
**返回值**:
空 | (
selectedKeys: string\[],
extra: {
selectedNodes: Array\;
node: NodeInstance;
selected: boolean;
event: React.KeyboardEvent | React.MouseEvent;
}
) => void | () => {} | | - |
| multiple | 是否支持多选 | boolean | false | | - |
| checkable | 是否支持勾选节点的复选框 | boolean | false | | - |
| checkedKeys | （用于受控）当前勾选复选框节点 key 的数组或 `{checked: Array, indeterminate: Array}` 的对象 | | {
checked: string\[];
indeterminate: string\[];
}
| string\[] | - | | - |
| defaultCheckedKeys | （用于非受控）默认勾选复选框节点 key 的数组 | | {
checked: string\[];
indeterminate: string\[];
}
| string\[] | \[] | | - |
| checkStrictly | 勾选节点复选框是否完全受控（父子节点选中状态不再关联） | boolean | false | | - |
| checkedStrategy | 定义选中时回填的方式 | 'all' | 'parent' | 'child' | 'all' | | - |
| onCheck | 勾选或取消勾选复选框时触发的回调函数
**签名**:
**参数**:
*checkedKeys*: 勾选复选框节点key的数组
*extra*: 额外参数
**返回值**:
空 | (
checkedKeys: string\[],
extra: {
checkedNodes: Array\;
checkedNodesPositions: Array\;
indeterminateKeys: string\[];
node: NodeInstance;
checked: boolean;
key: Key;
}
) => void | () => {} | | - |
| expandedKeys | （用于受控）当前展开的节点 key 的数组 | string\[] | - | | - |
| defaultExpandedKeys | （用于非受控）默认展开的节点 key 的数组 | string\[] | \[] | | - |
| defaultExpandAll | 是否默认展开所有节点 | boolean | false | | - |
| autoExpandParent | 是否自动展开父节点 | boolean | true | | - |
| onExpand | 展开或收起节点时触发的回调函数
**签名**:
**参数**:
*expandedKeys*: 展开节点key的数组
*extra*: 额外参数
**返回值**:
空 | (
expandedKeys: string\[],
extra: {
node: NodeInstance;
expanded: boolean;
}
) => void | () => {} | | - |
| editable | 是否支持编辑节点内容 | boolean | false | | - |
| onEditFinish | 编辑节点内容完成时触发的回调函数
**签名**:
**参数**:
*key*: 编辑节点 key
*label*: 编辑节点完成时节点的文本
*node*: 当前编辑的节点
**返回值**:
空 | (key: Key, label: string, node: NodeInstance) => void | () => {} | | - |
| draggable | 是否支持拖拽节点 | boolean | false | | - |
| onDragStart | 开始拖拽节点时触发的回调函数
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
空 | (info: {
event: React.MouseEvent;
node: NodeInstance;
expandedKeys: string\[];
}) => void | () => {} | | - |
| onDragEnter | 拖拽节点进入目标节点时触发的回调函数
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
空 | (info: {
event: React.MouseEvent;
node: NodeInstance;
expandedKeys: Array\;
}) => void | () => {} | | - |
| onDragOver | 拖拽节点在目标节点上移动的时候触发的回调函数
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| onDragLeave | 拖拽节点离开目标节点时触发的回调函数
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| onDragEnd | 拖拽节点拖拽结束时触发的回调函数
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| onDrop | 拖拽节点放入目标节点内或前后触发的回调函数
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
空 | (info: {
event: React.MouseEvent;
node: NodeInstance;
dragNode: NodeInstance;
dragNodesKeys: Array\;
dropPosition: number;
}) => void | () => {} | | - |
| canDrop | 节点是否可被作为拖拽的目标节点
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
是否可以被当作目标节点 | (info: {
event?: React.MouseEvent;
node: NodeInstance;
dragNode: NodeInstance;
dragNodesKeys: Array\;
dropPosition: number;
}) => boolean | () => {} | | - |
| loadData | 异步加载数据的函数
**签名**:
**参数**:
*node*: 被点击展开的节点 | (node: NodeInstance) => Promise\ | - | | - |
| filterTreeNode | 按需筛选高亮节点
**签名**:
**参数**:
*node*: 待筛选的节点
**返回值**:
是否被筛选中 | (node: NodeInstance) => boolean | - | | - |
| onRightClick | 右键点击节点时触发的回调函数
**签名**:
**参数**:
*info*: 额外参数
**返回值**:
空 | (info: { event: React.MouseEvent; node: NodeInstance }) => void | () => {} | | - |
| isLabelBlock | 设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+) | boolean | false | | - |
| isNodeBlock | 设置节点是否占满一行 | boolean | Record\ | false | | - |
| animation | 是否开启展开收起动画 | boolean | true | | - |
| focusedKey | 当前获得焦点的子菜单或菜单项 key 值 | Key | - | | - |
| renderChildNodes | 渲染子节点
**签名**:
**参数**:
*nodes*: 所有的子节点
**返回值**:
子节点 | (nodes: NodeElement\[]) => React.ReactNode | - | | - |
| labelRender | 渲染单个子节点
**签名**:
**参数**:
*node*: 节点数据
**返回值**:
返回节点 | (node: Record\) => React.ReactNode | - | | 1.25 |
| immutable | 是否是不可变数据 | boolean | false | | 1.23 |
| useVirtual | 是否开启虚拟滚动 | boolean | false | | - |
### Tree.Node
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ---------------- | ---------------------------------------------- | --------------- | ------ | -------- |
| children | 树节点 | React.ReactNode | - | |
| label | 节点文本内容 | React.ReactNode | '-- | |
| selectable | 单独设置是否支持选中，覆盖 Tree 的 selectable | boolean | - | |
| checkable | 单独设置是否出现复选框，覆盖 Tree 的 checkable | boolean | - | |
| editable | 单独设置是否支持编辑，覆盖 Tree 的 editable | boolean | - | |
| draggable | 单独设置是否支持拖拽，覆盖 Tree 的 draggable | boolean | - | |
| disabled | 是否禁止节点响应 | boolean | false | |
| checkboxDisabled | 是否禁止勾选节点复选框 | boolean | false | |
| isLeaf | 是否是叶子节点，设置loadData时生效 | boolean | - | |
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```