Tree

用于展示具有层级结构的数据。

何时使用 #

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

代码演示 #

基本 #

最简单的用法，展示可展开，可选中，可勾选，可编辑，可右键，禁用，禁用勾选，默认展开，默认选中，默认勾选等功能。

数据直接生成 #

使用 dataSource 生成树结构，除设置 key, label, children 属性外，还可传入 TreeNode 的其他属性，详细见TreeNode API，推荐使用该方式生成 Tree 组件。

单选与多选 #

通过设置multiple为true，支持节点多选。

勾选 #

通过设置checkable为true，开启节点勾选，默认情况下，节点的勾选状态受上下级节点的关联，可以通过checkStrictly为false关闭该关联逻辑。

展开折叠 #

受控模式展开或折叠节点

带线样式 #

使用showLine开启节点之间的连接线，用于更清晰地展示节点的层级结构。

图标 #

可以设置节点文本前的icon图标。

异步加载 #

点击展开节点之后动态加载数据，常用于通过后端接口获取数据的场景。通过设置 loadData 属性开启，通过设置 isLeaf 属性，判断节点是否是叶子节点，允许异步加载数据。

虚拟滚动 #

当树的节点数比较多的时候，设置虚拟滚动提高性能，注意设置高度，且允许滚动。

实现搜索 #

组合 Search 组件，实现 Tree 组件的搜索。通过 ref 获取 Tree 实例，可调用 scrollFilterNodeIntoView 方法实现将匹配到的第一个节点滚动到可视区域。

实现拖动 #

实现节点的拖动逻辑。

树节点占满一行 #

可以通过设置 isNodeBlock 为 true，来让树节点占满一行，isNodeBlock 也可传入一个对象，支持设置 defaultPaddingLeft（默认的左内边距）和 indent （缩进距离），另外注意 showLine  在开启 isNodeBlock 时失效。

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<NodeInstance>;
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<NodeInstance>;
checkedNodesPositions: Array<NodeInstance>;
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<string>;
}) => 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<string>;
dropPosition: number;
}) => void		 () => {} -
canDrop 节点是否可被作为拖拽的目标节点

签名:
参数:
info: 额外参数
返回值:
是否可以被当作目标节点		 (info: {
event?: React.MouseEvent;
node: NodeInstance;
dragNode: NodeInstance;
dragNodesKeys: Array<string>;
dropPosition: number;
}) => boolean		 () => {} -
loadData 异步加载数据的函数

签名:
参数:
node: 被点击展开的节点		 (node: NodeInstance) => Promise<unknown> - -
filterTreeNode 按需筛选高亮节点

签名:
参数:
node: 待筛选的节点
返回值:
是否被筛选中		 (node: NodeInstance) => boolean - -
onRightClick 右键点击节点时触发的回调函数

签名:
参数:
info: 额外参数
返回值:
空		 (info: { event: React.MouseEvent; node: NodeInstance }) => void () => {} -
isLabelBlock 设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+) boolean false -
isNodeBlock 设置节点是否占满一行 boolean | Record<string, unknown> false -
animation 是否开启展开收起动画 boolean true -
focusedKey 当前获得焦点的子菜单或菜单项 key 值 Key - -
renderChildNodes 渲染子节点

签名:
参数:
nodes: 所有的子节点
返回值:
子节点		 (nodes: NodeElement[]) => React.ReactNode - -
labelRender 渲染单个子节点

签名:
参数:
node: 节点数据
返回值:
返回节点		 (node: Record<string, unknown>) => 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 -