树形控件Tree
你可能会说
文件夹那种一层层展开的，点小三角展开下一级。
把文件夹、部门或分类按父子关系排列，并让用户逐层展开或收起例如项目文件会显示“src”文件夹，展开后才能看到里面的页面文件。它主要帮助浏览层级；需要从中勾选并提交结果时，应使用 树选择 Tree Select。
什么时候用
- 数据天生有层级：文件夹、分类、菜单▾📁 设计资源📄 首页.sketch📄 图标.sketch▸📁 素材库
- 存在多层父子关系，需要逐级展开查看▾一级分类▾二级分类▾三级分类叶子节点
- 组织架构选人：公司 → 部门 → 成员▾🏢 某某科技▾设计部林小hu▸研发部
- 在层级里批量勾选：权限、可见范围配置▾页面权限查看编辑
什么时候不用
- 层级较浅且只需沿单一路径选择时，使用 级联选择器 Cascader 更直接省 / 市 / 区广东省深圳市南山区
- 单层数据没有父子关系时，应使用 列表 List项目 A项目 B项目 C没有父子层级，列表就够
- 窄屏展示深层树会让多级缩进持续压缩内容，可改用分步选择▾ 一级▾ 二级三级…多级缩进压缩内容宽度，节点名称被截断
- 默认全部展开，节点过多会削弱层级辨识▾全部展开▾节点子节点▾节点子节点
组成结构 · Anatomy
▾设计部▸UI 组
整棵树的容器
有子节点才有，点击展开 / 收起
节点名称，可高亮选中
缩进一级，表示从属关系
常见变体 · Variants
可勾选Checkable
▾页面权限
查看
编辑
要在层级里批量选择，比如配权限
带连接线ShowLine
▾设计部
▸UI 组
▸用研组
需要加强父子节点归属辨识时
目录树Directory
▾📁 设计资源
📄 首页.sketch
📄 图标.sketch
展示文件目录，配文件夹图标更直观
典型使用场景
文件目录浏览
组织架构选人
选择审批人
▾🏢 某某科技
▾设计部
林小hu▸研发部
权限配置勾选
角色权限 · 运营已选 3 / 6 项
▾内容管理
发布文章
删除他人文章
▸数据看板
商品分类管理
商品分类
▾数码家电128 件编辑
耳机音箱46 件
智能穿戴32 件
▸家居生活96 件
延伸阅读 · 权威出处