树形控件
Tree View
别名:树形列表文件树目录树树结构tree
这是什么
以嵌套分支展示层级结构的可展开列表，每层节点可折叠或展开，子节点缩进排布于父节点之下。适合文件目录、组织架构、分类体系等天然成树的数据；节点可单选或多选，展开状态与选中状态相互独立。
名词辨析
「树」有时也指思维导图或组织架构图；本词条专指可展开、可选择的列表式树形控件。
交互实验室
试一试，再决定怎么用展开与折叠若干分支，用方向键在节点间移动并选中一个深层节点。
正在加载实验室…
使用时关注什么
- 01展开状态与选中状态相互独立
- 02键盘可在父子与兄弟节点间连续移动
✓ 适用场景
- 数据天然分层，如目录、组织架构、分类树
- 需要折叠分支以管理大量同级节点
- 层级关系本身是信息的一部分
✕ 不适用场景
- 只有两层且每层几项，用 accordion 或分组列表
- 层级是导航框架而非内容，用 sidebar 或 menu
- 扁平长列表更适合，用 table 或 list
常见形式
单选树
Single select
同时只有一个节点被选中，常配合详情面板
多选树
Multi select
可勾选多个节点，父节点支持半选态
文件树
File tree
带类型图标的目录树，最常见的产品形态
实现要点
padding-leftborder-lefttransform子层级用递归缩进（padding-left 或 margin-left）表达深度，也可用竖向参考线辅助阅读。展开指示是小三角或加减号，旋转或切换图标表达状态；折叠时隐藏子树但保留 DOM 语义。键盘遵循 roving tabindex，方向键在可见节点间移动。
平台 API
role="tree"role="treeitem"aria-expanded代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA APG | Tree View |
| Radix Primitives | Collapsible |
| MUI | TreeView |
相关概念
容易混淆
手风琴Accordion
accordion 是并列分区的开合，tree-view 表达任意深度的父子层级
菜单Menu
menu 用于命令与导航动作，tree-view 用于浏览并选择层级数据