Ant Design

⌘ K

6.4.3

Tree
树形控件

多层次的结构列表。

使用import { Tree } from 'antd';

反馈

components/tree 提交问题待解决

文档

编辑此页 LLMs.md

文档贡献者

Tour漫游式引导 Alert警告提示

Ant Design

⌘ K

6.4.3

Tree
树形控件

多层次的结构列表。

使用import { Tree } from 'antd';

反馈

components/tree 提交问题待解决

文档

编辑此页 LLMs.md

文档贡献者

Tour漫游式引导 Alert警告提示

何时使用

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

代码演示

API

通用属性参考：通用属性

Tree props

参数	说明	类型	默认值	版本
allowDrop	是否允许拖拽时放置在该节点	({ dropNode, dropPosition }) => boolean	-
autoExpandParent	是否自动展开父节点	boolean	false
blockNode	是否节点占据一行	boolean	false
checkable	节点前添加 Checkbox 复选框	boolean	false
checkedKeys	（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置 `checkable` 和 `checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联	string[] \| {checked: string[], halfChecked: string[]}	[]
checkStrictly	checkable 状态下节点选择完全受控（父子节点选中状态不再关联）	boolean	false
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
defaultCheckedKeys	默认选中复选框的树节点	string[]	[]
defaultExpandAll	默认展开所有树节点	boolean	false
defaultExpandedKeys	默认展开指定的树节点	string[]	[]
defaultExpandParent	默认展开父节点	boolean	true
defaultSelectedKeys	默认选中的树节点	string[]	[]
disabled	将树禁用	boolean	false
draggable	设置节点可拖拽，可以通过 `icon: false` 关闭拖拽提示图标	boolean \| ((node: DataNode) => boolean) \| { icon?: React.ReactNode \| false, nodeDraggable?: (node: DataNode) => boolean }	false	`config`: 4.17.0
expandedKeys	（受控）展开指定的树节点	string[]	[]
fieldNames	自定义节点 title、key、children 的字段	object	{ title: `title`, key: `key`, children: `children` }	4.17.0
filterTreeNode	按需筛选树节点（高亮），返回 true	function(node)	-
height	设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动	number	-
icon	在标题之前插入自定义图标。需要设置 `showIcon` 为 true	ReactNode \| (props) => ReactNode	-
loadData	异步加载数据	function(node)	-
loadedKeys	（受控）已经加载的节点，需要配合 `loadData` 使用	string[]	[]
multiple	支持点选多个节点（节点本身）	boolean	false
rootStyle	添加在 Tree 最外层的 style	CSSProperties	-	4.20.0
selectable	是否可选中	boolean	true
selectedKeys	（受控）设置选中的树节点，多选需设置 `multiple` 为 true	string[]	-
showIcon	控制是否展示 `icon` 节点，没有默认样式	boolean	false
showLine	是否展示连接线	boolean \| { showLeafIcon: ReactNode \| ((props: AntTreeNodeProps) => ReactNode) }	false
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
switcherIcon	自定义树节点的展开/折叠图标（`showLine` 下不会自动 rotate）	ReactNode \| ((props: AntTreeNodeProps) => ReactNode)	-	renderProps: 4.20.0
switcherLoadingIcon	自定义树节点的加载图标	ReactNode	-	5.20.0
titleRender	自定义渲染节点	(nodeData) => ReactNode	-	4.5.0
treeData	treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）	array<{key, title, children, [disabled, selectable]}>	-
virtual	设置 false 时关闭虚拟滚动	boolean	true	4.1.0
onCheck	点击复选框触发	function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys})	-
onDoubleClick	双击树节点触发	function(event, node)	-
onDragEnd	dragend 触发时调用	function({event, node})	-
onDragEnter	dragenter 触发时调用	function({event, node, expandedKeys})	-
onDragLeave	dragleave 触发时调用	function({event, node})	-
onDragOver	dragover 触发时调用	function({event, node})	-
onDragStart	开始拖拽时调用	function({event, node})	-
onDrop	drop 触发时调用	function({event, node, dragNode, dragNodesKeys})	-
onExpand	展开/收起节点时触发	function(expandedKeys, {expanded: boolean, node})	-
onLoad	节点加载完毕时触发	function(loadedKeys, {event, node})	-
onRightClick	响应右键点击	function({event, node})	-
onSelect	点击树节点触发	function(selectedKeys, e:{selected: boolean, selectedNodes, node, event})	-

TreeNode props

参数	说明	类型	默认值
checkable	当树为 checkable 时，设置独立节点是否展示 Checkbox	boolean	-
disableCheckbox	禁掉 checkbox	boolean	false
disabled	禁掉响应	boolean	false
icon	自定义图标。可接收组件，props 为当前节点 props	ReactNode \| (props) => ReactNode	-
isLeaf	设置为叶子节点 (设置了 `loadData` 时有效)。为 `false` 时会强制将其作为父节点	boolean	-
key	被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！	string	(内部计算出的节点位置)
selectable	设置节点是否可被选中	boolean	true
title	标题	ReactNode	`---`

DirectoryTree props

参数	说明	类型	默认值
expandAction	目录展开逻辑，可选：false \| `click` \| `doubleClick`	string \| boolean	`click`

注意

在 3.4.0 之前：树节点可以有很多，但在设置 checkable 时，将会花费更多的计算时间，因此我们缓存了一些计算结果（this.treeNodesStates）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：

jsx

{
  this.state.treeData.length ? (
    <Tree>
      {this.state.treeData.map((data) => (
        <TreeNode />
      ))}
    </Tree>
  ) : (
    'loading tree'
  );
}

Tree 方法

名称	说明
scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number })	虚拟滚动下，滚动到指定 key 条目

Semantic DOM

parent 1

leaf

root
6.0.0
根元素，设置树形控件的基础样式、布局和容器控制
item
6.0.0
条目元素，设置树节点的基础样式、拖拽状态、角色属性、缩进、切换器、内容包装器等节点结构
itemIcon
6.0.0
图标元素，设置树节点图标的样式、尺寸和状态显示
itemTitle
6.0.0
标题元素，设置树节点标题文字的显示样式和文本内容
itemSwitcher
6.4.0
展开收起切换器元素，设置树节点展开/收起按钮的样式和背景

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
directoryNodeSelectedBg	目录树节点选中背景色	string	#1677ff
directoryNodeSelectedColor	目录树节点选中文字颜色	string	#fff
indentSize	缩进宽度	number	24
nodeHoverBg	节点悬浮态背景色	string	rgba(0,0,0,0.04)
nodeHoverColor	节点悬浮态态文字颜色	string	rgba(0,0,0,0.88)
nodeSelectedBg	节点选中态背景色	string	#e6f4ff
nodeSelectedColor	节点选中态文字颜色	string	rgba(0,0,0,0.88)
switcherSize	展开按钮宽度	number	24
titleHeight	节点标题高度	number	24

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorBgContainer	组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。	string	#ffffff
colorBgContainerDisabled	控制容器在禁用状态下的背景色。	string	rgba(0,0,0,0.04)
colorBgTextHover	控制文本在悬停状态下的背景色。	string	rgba(0,0,0,0.06)
colorBorder	默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。	string	#d9d9d9
colorPrimary	品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义	string	#1677ff
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorPrimaryHover	主色梯度下的悬浮态。	string	#4096ff
colorSplit	用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。	string	rgba(5,5,5,0.06)
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0,0,0,0.88)
colorTextDisabled	控制禁用状态下的字体颜色。	string	rgba(0,0,0,0.25)
colorTextQuaternary	第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。	string	rgba(0,0,0,0.25)
colorWhite	不随主题变化的纯白色	string	#fff
borderRadius	基础组件的圆角大小，例如按钮、输入框、卡片等	number	6
borderRadiusSM	SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角	number	4
controlInteractiveSize	控制组件的交互大小。	number	16
controlItemBgActiveDisabled	控制组件项在禁用状态下的激活背景颜色。	string	rgba(0,0,0,0.15)
controlItemBgHover	控制组件项在鼠标悬浮时的背景颜色。	string	rgba(0,0,0,0.04)
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeLG	大号字体大小	number	16
fontWeightStrong	控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。	number	600
lineHeight	文本行高	number	1.5714285714285714
lineType	用于控制组件边框、分割线等的样式，默认是实线	string	solid
lineWidth	用于控制组件边框、分割线等的宽度	number	1
lineWidthBold	描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。	number	2
lineWidthFocus	控制线条的宽度，当组件处于聚焦态时。	number	3
marginXS	控制元素外边距，小尺寸。	number	8
motionDurationFast	动效播放速度，快速。用于小型元素动画交互	string	0.1s
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s
motionEaseInBack	预设动效曲率	string	cubic-bezier(0.71, -0.46, 0.88, 0.6)
motionEaseInOut	预设动效曲率	string	cubic-bezier(0.645, 0.045, 0.355, 1)
motionEaseOutBack	预设动效曲率	string	cubic-bezier(0.12, 0.4, 0.29, 1.46)
paddingXS	控制元素的特小内间距。	number	8

FAQ

defaultExpandAll 在异步加载数据时为何不生效？

default 前缀属性只有在初始化时生效，因而异步加载数据时 defaultExpandAll 已经执行完成。你可以通过受控 expandedKeys 或者在数据加载完成后渲染 Tree 来实现全部展开。

虚拟滚动的限制

虚拟滚动通过在仅渲染可视区域的元素来提升渲染性能。但是同时由于不会渲染所有节点，所以无法自动拓转横向宽度（比如超长 title 的横向滚动条）。

`disabled` 节点在树中的关系是什么？

Tree 通过传导方式进行数据变更。无论是展开还是勾选，它都会从变更的节点开始向上、向下传导变化，直到遍历的当前节点是 disabled 时停止。因而如果控制的节点本身为 disabled 时，那么它只会修改本身而不会影响其他节点。举例来说，一个父节点包含 3 个子节点，其中一个为 disabled 状态。那么勾选父节点，只会影响其余两个子节点变成勾选状态。勾选两个子节点后，无论 disabled 节点什么状态，父节点都会变成勾选状态。

这种传导终止的方式是为了防止通过勾选子节点使得 disabled 父节点变成勾选状态，而用户无法直接勾选 disabled 父节点更改其状态导致的交互矛盾。如果你有着自己的传导需求，可以通过 checkStrictly 自定义勾选逻辑。

何时使用

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

代码演示

parent 1

parent 1-0

leaf

parent 1-1

sss

基本

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

0-0

0-0-0

0-0-0-0

0-0-0-1

0-0-0-2

0-0-1

0-0-2

0-1

0-2

拖动示例

将节点拖拽到其他节点内部或前后。

0-0

0-1

0-2

可搜索

可搜索的树。

parent 1

leaf

自定义图标

可以针对不同的节点定制图标。

parent 1

parent 1-0

leaf

parent 1-1

parent 1-2

自定义展开/折叠图标

自定义展开/折叠图标。

parent

child 1

child 2

占据整行

0-0

0-0-0

0-0-0-0

0-0-0-1

0-0-0-2

0-0-1

0-0-1-0

0-0-1-1

0-0-1-2

0-0-2

0-1

0-2

受控操作示例

Expand to load

Tree Node

异步数据加载

点击展开节点，动态加载数据。

showLine:

showIcon:

showLeafIcon:

True

parent 1

parent 1-0

leaf

multiple line title

leaf

parent 1-1

parent 1-2

parent 2

连接线

节点之间带连接线的树，常用于文件目录结构展示。使用 showLine 开启，可以用 switcherIcon 修改默认图标。

parent 0

leaf 0-0

leaf 0-1

parent 1

leaf 1-0

leaf 1-1

内置的目录树，multiple 模式支持 ctrl(Windows) / command(Mac) 复选。

0-0

0-0-0

0-0-0-0

0-0-0-0-0

0-0-0-0-1

0-0-0-0-2

0-0-0-0-3

0-0-0-0-4

0-0-0-0-5

0-0-0-0-6

虚拟滚动

使用 height 属性则切换为虚拟滚动。

parent 1

parent 1-0

leaf

parent 1-1

leaf

自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Tree 的语义化结构样式。

6.0.0

API

通用属性参考：通用属性

Tree props

参数	说明	类型	默认值	版本
allowDrop	是否允许拖拽时放置在该节点	({ dropNode, dropPosition }) => boolean	-
autoExpandParent	是否自动展开父节点	boolean	false
blockNode	是否节点占据一行	boolean	false
checkable	节点前添加 Checkbox 复选框	boolean	false
checkedKeys	（受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置 `checkable` 和 `checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联	string[] \| {checked: string[], halfChecked: string[]}	[]
checkStrictly	checkable 状态下节点选择完全受控（父子节点选中状态不再关联）	boolean	false
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
defaultCheckedKeys	默认选中复选框的树节点	string[]	[]
defaultExpandAll	默认展开所有树节点	boolean	false
defaultExpandedKeys	默认展开指定的树节点	string[]	[]
defaultExpandParent	默认展开父节点	boolean	true
defaultSelectedKeys	默认选中的树节点	string[]	[]
disabled	将树禁用	boolean	false
draggable	设置节点可拖拽，可以通过 `icon: false` 关闭拖拽提示图标	boolean \| ((node: DataNode) => boolean) \| { icon?: React.ReactNode \| false, nodeDraggable?: (node: DataNode) => boolean }	false	`config`: 4.17.0
expandedKeys	（受控）展开指定的树节点	string[]	[]
fieldNames	自定义节点 title、key、children 的字段	object	{ title: `title`, key: `key`, children: `children` }	4.17.0
filterTreeNode	按需筛选树节点（高亮），返回 true	function(node)	-
height	设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动	number	-
icon	在标题之前插入自定义图标。需要设置 `showIcon` 为 true	ReactNode \| (props) => ReactNode	-
loadData	异步加载数据	function(node)	-
loadedKeys	（受控）已经加载的节点，需要配合 `loadData` 使用	string[]	[]
multiple	支持点选多个节点（节点本身）	boolean	false
rootStyle	添加在 Tree 最外层的 style	CSSProperties	-	4.20.0
selectable	是否可选中	boolean	true
selectedKeys	（受控）设置选中的树节点，多选需设置 `multiple` 为 true	string[]	-
showIcon	控制是否展示 `icon` 节点，没有默认样式	boolean	false
showLine	是否展示连接线	boolean \| { showLeafIcon: ReactNode \| ((props: AntTreeNodeProps) => ReactNode) }	false
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
switcherIcon	自定义树节点的展开/折叠图标（`showLine` 下不会自动 rotate）	ReactNode \| ((props: AntTreeNodeProps) => ReactNode)	-	renderProps: 4.20.0
switcherLoadingIcon	自定义树节点的加载图标	ReactNode	-	5.20.0
titleRender	自定义渲染节点	(nodeData) => ReactNode	-	4.5.0
treeData	treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）	array<{key, title, children, [disabled, selectable]}>	-
virtual	设置 false 时关闭虚拟滚动	boolean	true	4.1.0
onCheck	点击复选框触发	function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys})	-
onDoubleClick	双击树节点触发	function(event, node)	-
onDragEnd	dragend 触发时调用	function({event, node})	-
onDragEnter	dragenter 触发时调用	function({event, node, expandedKeys})	-
onDragLeave	dragleave 触发时调用	function({event, node})	-
onDragOver	dragover 触发时调用	function({event, node})	-
onDragStart	开始拖拽时调用	function({event, node})	-
onDrop	drop 触发时调用	function({event, node, dragNode, dragNodesKeys})	-
onExpand	展开/收起节点时触发	function(expandedKeys, {expanded: boolean, node})	-
onLoad	节点加载完毕时触发	function(loadedKeys, {event, node})	-
onRightClick	响应右键点击	function({event, node})	-
onSelect	点击树节点触发	function(selectedKeys, e:{selected: boolean, selectedNodes, node, event})	-

TreeNode props

参数	说明	类型	默认值
checkable	当树为 checkable 时，设置独立节点是否展示 Checkbox	boolean	-
disableCheckbox	禁掉 checkbox	boolean	false
disabled	禁掉响应	boolean	false
icon	自定义图标。可接收组件，props 为当前节点 props	ReactNode \| (props) => ReactNode	-
isLeaf	设置为叶子节点 (设置了 `loadData` 时有效)。为 `false` 时会强制将其作为父节点	boolean	-
key	被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！	string	(内部计算出的节点位置)
selectable	设置节点是否可被选中	boolean	true
title	标题	ReactNode	`---`

DirectoryTree props

参数	说明	类型	默认值
expandAction	目录展开逻辑，可选：false \| `click` \| `doubleClick`	string \| boolean	`click`

注意

在 3.4.0 之前：树节点可以有很多，但在设置 checkable 时，将会花费更多的计算时间，因此我们缓存了一些计算结果（this.treeNodesStates）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：

jsx

{
  this.state.treeData.length ? (
    <Tree>
      {this.state.treeData.map((data) => (
        <TreeNode />
      ))}
    </Tree>
  ) : (
    'loading tree'
  );
}

Tree 方法

名称	说明
scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number })	虚拟滚动下，滚动到指定 key 条目

Semantic DOM

parent 1

leaf

root
6.0.0
根元素，设置树形控件的基础样式、布局和容器控制
item
6.0.0
条目元素，设置树节点的基础样式、拖拽状态、角色属性、缩进、切换器、内容包装器等节点结构
itemIcon
6.0.0
图标元素，设置树节点图标的样式、尺寸和状态显示
itemTitle
6.0.0
标题元素，设置树节点标题文字的显示样式和文本内容
itemSwitcher
6.4.0
展开收起切换器元素，设置树节点展开/收起按钮的样式和背景

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
directoryNodeSelectedBg	目录树节点选中背景色	string	#1677ff
directoryNodeSelectedColor	目录树节点选中文字颜色	string	#fff
indentSize	缩进宽度	number	24
nodeHoverBg	节点悬浮态背景色	string	rgba(0,0,0,0.04)
nodeHoverColor	节点悬浮态态文字颜色	string	rgba(0,0,0,0.88)
nodeSelectedBg	节点选中态背景色	string	#e6f4ff
nodeSelectedColor	节点选中态文字颜色	string	rgba(0,0,0,0.88)
switcherSize	展开按钮宽度	number	24
titleHeight	节点标题高度	number	24

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorBgContainer	组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。	string	#ffffff
colorBgContainerDisabled	控制容器在禁用状态下的背景色。	string	rgba(0,0,0,0.04)
colorBgTextHover	控制文本在悬停状态下的背景色。	string	rgba(0,0,0,0.06)
colorBorder	默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。	string	#d9d9d9
colorPrimary	品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义	string	#1677ff
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorPrimaryHover	主色梯度下的悬浮态。	string	#4096ff
colorSplit	用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。	string	rgba(5,5,5,0.06)
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0,0,0,0.88)
colorTextDisabled	控制禁用状态下的字体颜色。	string	rgba(0,0,0,0.25)
colorTextQuaternary	第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。	string	rgba(0,0,0,0.25)
colorWhite	不随主题变化的纯白色	string	#fff
borderRadius	基础组件的圆角大小，例如按钮、输入框、卡片等	number	6
borderRadiusSM	SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角	number	4
controlInteractiveSize	控制组件的交互大小。	number	16
controlItemBgActiveDisabled	控制组件项在禁用状态下的激活背景颜色。	string	rgba(0,0,0,0.15)
controlItemBgHover	控制组件项在鼠标悬浮时的背景颜色。	string	rgba(0,0,0,0.04)
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeLG	大号字体大小	number	16
fontWeightStrong	控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。	number	600
lineHeight	文本行高	number	1.5714285714285714
lineType	用于控制组件边框、分割线等的样式，默认是实线	string	solid
lineWidth	用于控制组件边框、分割线等的宽度	number	1
lineWidthBold	描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。	number	2
lineWidthFocus	控制线条的宽度，当组件处于聚焦态时。	number	3
marginXS	控制元素外边距，小尺寸。	number	8
motionDurationFast	动效播放速度，快速。用于小型元素动画交互	string	0.1s
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s
motionEaseInBack	预设动效曲率	string	cubic-bezier(0.71, -0.46, 0.88, 0.6)
motionEaseInOut	预设动效曲率	string	cubic-bezier(0.645, 0.045, 0.355, 1)
motionEaseOutBack	预设动效曲率	string	cubic-bezier(0.12, 0.4, 0.29, 1.46)
paddingXS	控制元素的特小内间距。	number	8

FAQ

defaultExpandAll 在异步加载数据时为何不生效？

default 前缀属性只有在初始化时生效，因而异步加载数据时 defaultExpandAll 已经执行完成。你可以通过受控 expandedKeys 或者在数据加载完成后渲染 Tree 来实现全部展开。

虚拟滚动的限制

虚拟滚动通过在仅渲染可视区域的元素来提升渲染性能。但是同时由于不会渲染所有节点，所以无法自动拓转横向宽度（比如超长 title 的横向滚动条）。

`disabled` 节点在树中的关系是什么？

Tree 通过传导方式进行数据变更。无论是展开还是勾选，它都会从变更的节点开始向上、向下传导变化，直到遍历的当前节点是 disabled 时停止。因而如果控制的节点本身为 disabled 时，那么它只会修改本身而不会影响其他节点。举例来说，一个父节点包含 3 个子节点，其中一个为 disabled 状态。那么勾选父节点，只会影响其余两个子节点变成勾选状态。勾选两个子节点后，无论 disabled 节点什么状态，父节点都会变成勾选状态。

这种传导终止的方式是为了防止通过勾选子节点使得 disabled 父节点变成勾选状态，而用户无法直接勾选 disabled 父节点更改其状态导致的交互矛盾。如果你有着自己的传导需求，可以通过 checkStrictly 自定义勾选逻辑。

parent 1

parent 1-0

leaf

parent 1-1

sss

基本

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

0-0

0-0-0

0-0-0-0

0-0-0-1

0-0-0-2

0-0-1

0-0-2

0-1

0-2

拖动示例

将节点拖拽到其他节点内部或前后。

0-0

0-1

0-2

可搜索

可搜索的树。

parent 1

leaf

自定义图标

可以针对不同的节点定制图标。

parent 1

parent 1-0

leaf

parent 1-1

parent 1-2

自定义展开/折叠图标

自定义展开/折叠图标。

parent

child 1

child 2

占据整行

0-0

0-0-0

0-0-0-0

0-0-0-1

0-0-0-2

0-0-1

0-0-1-0

0-0-1-1

0-0-1-2

0-0-2

0-1

0-2

受控操作示例

Expand to load

Tree Node

异步数据加载

点击展开节点，动态加载数据。

showLine:

showIcon:

showLeafIcon:

True

parent 1

parent 1-0

leaf

multiple line title

leaf

parent 1-1

parent 1-2

parent 2

连接线

节点之间带连接线的树，常用于文件目录结构展示。使用 showLine 开启，可以用 switcherIcon 修改默认图标。

parent 0

leaf 0-0

leaf 0-1

parent 1

leaf 1-0

leaf 1-1

内置的目录树，multiple 模式支持 ctrl(Windows) / command(Mac) 复选。

0-0

0-0-0

0-0-0-0

0-0-0-0-0

0-0-0-0-1

0-0-0-0-2

0-0-0-0-3

0-0-0-0-4

0-0-0-0-5

0-0-0-0-6

虚拟滚动

使用 height 属性则切换为虚拟滚动。

parent 1

parent 1-0

leaf

parent 1-1

leaf

自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Tree 的语义化结构样式。

6.0.0

Tree树形控件

Tree树形控件

何时使用

代码演示

API

Tree props

TreeNode props

DirectoryTree props

注意

Tree 方法

Semantic DOM

root

item

itemIcon

itemTitle

itemSwitcher

主题变量（Design Token）

FAQ

defaultExpandAll 在异步加载数据时为何不生效？

虚拟滚动的限制

disabled 节点在树中的关系是什么？

何时使用

代码演示

API

Tree props

TreeNode props

DirectoryTree props

注意

Tree 方法

Semantic DOM

root

item

itemIcon

itemTitle

itemSwitcher

主题变量（Design Token）

FAQ

defaultExpandAll 在异步加载数据时为何不生效？

虚拟滚动的限制

disabled 节点在树中的关系是什么？

Tree
树形控件

Tree
树形控件

`disabled` 节点在树中的关系是什么？

`disabled` 节点在树中的关系是什么？