树形控件Tree

内容与数据展示

把有上下级关系的内容一层层展开查看

树形控件用展开和收起展示文件夹、部门和分类等层级结构。它可以只负责浏览，也可以增加选择或拖动；涉及权限时，要明确父子节点是否联动。

▸设计部

▸UI 组

林小hu

oil-oil

▸用研组

阿麦

▸研发部

前端组

后端组

什么时候用

数据天生有层级：文件夹、分类、菜单
▾📁 设计资源
📄 首页.sketch
📄 图标.sketch
▸📁 素材库
层级超过两级，需要逐级展开查看
▾一级分类
▾二级分类
▾三级分类
叶子节点
组织架构选人：公司 → 部门 → 成员
▾🏢 某某科技
▾设计部
林小hu
▸研发部
在层级里批量勾选：权限、可见范围配置
▾页面权限
查看
编辑

什么时候不用

只有两级、选项不多 → 用级联选择器 Cascader 更轻
省 / 市 / 区广东省深圳市南山区
只是单层数据，没有父子关系 → 用列表 List
项目 A
项目 B
项目 C
没有父子层级，列表就够
窄屏 / 手机端放很深的树，缩进全挤没
▾ 一级▾ 二级三级…窄屏里缩进全挤没
默认全部展开，一屏全是节点找不到北
▾全部展开
▾节点
子节点
▾节点
子节点
默认全展开，一屏装不下

组成结构 · Anatomy

▾设计部▸UI 组

1树形控件Tree整棵树的容器

2展开箭头Switcher有子节点才有，点击展开 / 收起

3节点Node节点名称，可高亮选中

4子节点Children缩进一级，表示从属关系

常见变体 · Variants

可勾选Checkable

▾页面权限

查看

编辑

要在层级里批量选择，比如配权限

带连接线ShowLine

▾设计部

▸UI 组

▸用研组

层级深看不清谁属于谁时加上

目录树Directory

▾📁 设计资源

📄 首页.sketch

📄 图标.sketch

展示文件目录，配文件夹图标更直观

典型使用场景

文件目录浏览

📁 vibe-ui-guide＋

▾📁 app

📄 globals.css

📄 page.tsx

▸📁 site

▸📁 public

组织架构选人

选择审批人

▾🏢 某某科技

▾设计部

林小hu

▸研发部

权限配置勾选

角色权限 · 运营已选 3 / 6 项

▾内容管理

发布文章

删除他人文章

▸数据看板

商品分类管理

商品分类

▾数码家电128 件编辑

耳机音箱46 件

智能穿戴32 件

▸家居生活96 件