树形控件
Tree
UI 组件也叫：树、树形菜单、目录树、TreeView
一句话：用可以逐级展开的缩进列表展示有上下级关系的数据，比如组织架构、文件夹目录、分类。
详细解释
树形控件把数据画成一层层缩进的列表：有下级的节点前面有一个小三角，点击展开后露出子节点，子节点再往右缩进一格。它还能加复选框做多选（勾选父节点会连带勾选全部子节点），也能支持拖拽调整层级、展开时再加载子节点。典型场景：文件管理器左侧的目录、部门人员选择、权限配置。
相似组件的区别：级联选择 是一个下拉框，按「省→市→区」一列一列往右选，最后选出一个值，适合表单；穿梭框 是左右两个列表，把项目从左边移到右边，适合从平铺的列表里挑一批；树形控件则把整个层级完整摊在页面上，适合浏览结构或批量勾选多个层级的节点。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
左侧放一个部门树形控件，按「公司 > 部门 > 小组」三级缩进显示，每个节点前有展开箭头和复选框，勾选父节点时自动勾选所有子节点，部分子节点被选中时父节点显示半选状态；顶部有搜索框，输入后高亮匹配节点并自动展开其上级。
结构与适用场景
结构描述
由逐级缩进的节点组成，每个节点有展开收起箭头、可选的复选框或图标和节点名称。
适用场景
- 数据有明确的上下级关系，比如组织架构、文件夹、商品分类
- 需要在层级数据里一次勾选多个节点，比如分配权限
- 用户需要浏览整体结构并逐级展开查看
不适用场景
- 表单里只需要沿层级选出一个值，比如选省市区，用级联选择更紧凑
- 数据没有层级，只是一长串平铺项目，用列表或穿梭框
- 层级只有一层，用普通列表或复选框组就够
常见坏用法
- 默认把几千个节点全部展开，页面卡顿且找不到重点
- 只能点小三角展开，点节点名称没有反应
- 勾选父节点后子节点不联动，也没有半选状态
识别特征
- 一列逐级向右缩进的文字项
- 每项前面有朝右或朝下的小三角
- 常带文件夹图标或复选框，层级之间有竖向连接线
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
[role="tree"].ant-tree.el-tree[class*="MuiTreeView-root"][class*="MuiSimpleTreeView-root"][class*="MuiRichTreeView-root"].arco-tree.t-tree.n-tree