树选择
Tree Select
中级通用树选择(Tree Select)是把层级节点放进表单选择框的控件,让你展开分支后选中一个或多个值。它解决了选项有上下级关系时,普通下拉列表难以看清归属的问题,比如给员工选择所属部门。
你可能会说:「我想在表单里选部门,能展开总公司和各分部,再选具体部门。」
动手看看为新员工选择部门
切换「展开部门选择框」模拟打开和关闭;悬停或用 Tab 聚焦树节点,再切换分支与已选团队,看看层级和选中态怎样配合。
下拉浮层盖住了入职日期、所属岗位和保存按钮,但没有接管整张表单;选完团队后关闭选择框,就能继续填写。
展开后能沿着「研发中心 → 产品研发部 → 团队」逐级查看。它不同于普通下拉列表:选项的上下级关系就在浮层里。
要点树选择由哪几部分组成?
- 1
层级节点说明选项归属
树选择把选项排成父子关系。比如「产品部」下面有「设计组」和「研发组」,你展开产品部就能找到目标,也能看出两个组属于哪里。
- 2
展开分支不等于选中
点开一个部门只是查看它的下级,选中才会把值填进表单。两种操作分开,你就不容易把「我想看看有哪些组」误当成「我选了整个部门」。
- 3
先说清父节点怎么选
有些业务允许选「产品部」,有些只允许选具体小组;多选时,选父节点是否连带选中子节点也会影响提交结果。你和 AI 协作时,把这些规则说清楚,才能核对它实现得对不对。
容易混淆的地方
树形控件主要用来浏览层级内容,不一定承担表单填值;树选择则要把选中的节点作为字段值提交。级联选择器通常让你沿着一级、二级逐步选到目标;树选择把各分支放在同一棵树里,适合你需要展开、对照不同分支的情况。
什么时候用
适合用
- 做员工资料表单时,让管理员从公司、部门、小组的层级里选择员工所属组织。
- 给后台角色配置可访问的目录,让管理员展开目录树并一次选中多个节点。
- 给知识库文章选择归档位置,分类有多层,而且编辑时需要看清分类的上下级。
不适合用
- 选项只有「公开、私密」两种且没有层级时,用单选框更直接。
- 只是浏览网站栏目、点击后进入页面时,用树形导航或普通链接,不必放进表单控件。
- 只需要从少量平级选项中选一个,比如选择语言,用普通选择器就够了。
练一练选一个答案,看看解释
你在做员工管理后台:公司下面有事业部,事业部下面有部门。新增员工时要选一个具体部门,管理员需要看清部门属于哪个事业部。哪种做法更合适?
让 AI 帮你做复制给 AI Agent 直接用
请在新增员工表单中做一个单选树选择字段,用公司、事业部、部门的层级展示选项。可以展开任意分支查看,但只有部门节点能选中;提交时保存部门标识。请区分展开状态和选中状态,并显示当前选中的部门名称。