logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Tree
树形控件

多层次的结构列表。
使用import { Tree } from "antd";
源码components/tree
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

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

代码演示

parent 1
parent 1-0
leaf
leaf
parent 1-1
sss
基本

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
拖动示例

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
0-0
0-1
0-2
可搜索

可搜索的树。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
parent 1
leaf
leaf
自定义图标

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
parent 1
parent 1-0
leaf
leaf
leaf
parent 1-1
parent 1-2
自定义展开/折叠图标

自定义展开/折叠图标。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
parent
child 1
child 2
占据整行
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
受控操作示例

受控操作示例

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Expand to load
Expand to load
Tree Node
异步数据加载

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
showLine:

showIcon:

showLeafIcon:
True
parent 1
parent 1-0
leaf
multiple line title
multiple line title
leaf
parent 1-1
parent 1-2
parent 2
连接线

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
parent 0
leaf 0-0
leaf 0-1
parent 1
leaf 1-0
leaf 1-1
目录

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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 属性则切换为虚拟滚动。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Tree props

参数说明类型默认值版本
allowDrop是否允许拖拽时放置在该节点({ dropNode, dropPosition }) => boolean-
autoExpandParent是否自动展开父节点booleanfalse
blockNode是否节点占据一行booleanfalse
checkable节点前添加 Checkbox 复选框booleanfalse
checkedKeys(受控)选中复选框的树节点(注意:父子节点有关联,如果传入父节点 key,则子节点自动选中;相应当子节点 key 都传入,父节点也自动选中。当设置 checkable 和 checkStrictly,它是一个有checked和halfChecked属性的对象,并且父子节点的选中与否不再关联string[] | {checked: string[], halfChecked: string[]}[]
checkStrictlycheckable 状态下节点选择完全受控(父子节点选中状态不再关联)booleanfalse
defaultCheckedKeys默认选中复选框的树节点string[][]
defaultExpandAll默认展开所有树节点booleanfalse
defaultExpandedKeys默认展开指定的树节点string[][]
defaultExpandParent默认展开父节点booleantrue
defaultSelectedKeys默认选中的树节点string[][]
disabled将树禁用booleanfalse
draggable设置节点可拖拽,可以通过 icon: false 关闭拖拽提示图标boolean | ((node: DataNode) => boolean) | { icon?: React.ReactNode | false, nodeDraggable?: (node: DataNode) => boolean }falseconfig: 4.17.0
expandedKeys(受控)展开指定的树节点string[][]
fieldNames自定义节点 title、key、children 的字段object{ title: title, key: key, children: children }4.17.0
filterTreeNode按需筛选树节点(高亮),返回 truefunction(node)-
height设置虚拟滚动容器高度,设置后内部节点不再支持横向滚动number-
icon在标题之前插入自定义图标。需要设置 showIcon 为 trueReactNode | (props) => ReactNode-
loadData异步加载数据function(node)-
loadedKeys(受控)已经加载的节点,需要配合 loadData 使用string[][]
multiple支持点选多个节点(节点本身)booleanfalse
rootStyle添加在 Tree 最外层的 styleCSSProperties-4.20.0
selectable是否可选中booleantrue
selectedKeys(受控)设置选中的树节点,多选需设置 multiple 为 truestring[]-
showIcon控制是否展示 icon 节点,没有默认样式booleanfalse
showLine是否展示连接线boolean | { showLeafIcon: ReactNode | ((props: AntTreeNodeProps) => ReactNode) }false
switcherIcon自定义树节点的展开/折叠图标(带有默认 rotate 角度样式)ReactNode | ((props: AntTreeNodeProps) => ReactNode)-renderProps: 4.20.0
switcherLoadingIcon自定义树节点的加载图标ReactNode-5.20.0
titleRender自定义渲染节点(nodeData) => ReactNode-4.5.0
treeDatatreeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一)array<{key, title, children, [disabled, selectable]}>-
virtual设置 false 时关闭虚拟滚动booleantrue4.1.0
onCheck点击复选框触发function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys})-
onDragEnddragend 触发时调用function({event, node})-
onDragEnterdragenter 触发时调用function({event, node, expandedKeys})-
onDragLeavedragleave 触发时调用function({event, node})-
onDragOverdragover 触发时调用function({event, node})-
onDragStart开始拖拽时调用function({event, node})-
onDropdrop 触发时调用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 时,设置独立节点是否展示 Checkboxboolean-
disableCheckbox禁掉 checkboxbooleanfalse
disabled禁掉响应booleanfalse
icon自定义图标。可接收组件,props 为当前节点 propsReactNode | (props) => ReactNode-
isLeaf设置为叶子节点 (设置了 loadData 时有效)。为 false 时会强制将其作为父节点boolean-
key被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意:整个树范围内的所有节点的 key 值不能重复!string(内部计算出的节点位置)
selectable设置节点是否可被选中booleantrue
title标题ReactNode---

DirectoryTree props

参数说明类型默认值
expandAction目录展开逻辑,可选:false | click | doubleClickstring | booleanclick

注意

在 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 条目

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
directoryNodeSelectedBg目录树节点选中背景色string#1677ff
directoryNodeSelectedColor目录树节点选中文字颜色string#fff
indentSize缩进宽度number24
nodeHoverBg节点悬浮态背景色stringrgba(0,0,0,0.04)
nodeHoverColor节点悬浮态态文字颜色stringrgba(0,0,0,0.88)
nodeSelectedBg节点选中态背景色string#e6f4ff
nodeSelectedColor节点选中态文字颜色stringrgba(0,0,0,0.88)
titleHeight节点标题高度number24
全局 Token如何定制?

FAQ

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

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

虚拟滚动的限制

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

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

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

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