跳到正文

树选择

Tree Select

中级通用

树选择(Tree Select)是把层级节点放进表单选择框的控件,让你展开分支后选中一个或多个值。它解决了选项有上下级关系时,普通下拉列表难以看清归属的问题,比如给员工选择所属部门。

你可能会说:「我想在表单里选部门,能展开总公司和各分部,再选具体部门。」

读之前建议先了解

动手看看

新增员工
所属部门
前端组
入职日期2026 年 6 月 1 日
所属岗位软件工程师
保存员工信息
选择所属团队
研发中心
产品研发部
前端组
后端组
市场中心
展开部门选择框
展开产品研发部
已选团队

切换「展开部门选择框」模拟打开和关闭;悬停或用 Tab 聚焦树节点,再切换分支与已选团队,看看层级和选中态怎样配合。

下拉浮层盖住了入职日期、所属岗位和保存按钮,但没有接管整张表单;选完团队后关闭选择框,就能继续填写。

展开后能沿着「研发中心 → 产品研发部 → 团队」逐级查看。它不同于普通下拉列表:选项的上下级关系就在浮层里。

要点

  1. 1

    层级节点说明选项归属

    树选择把选项排成父子关系。比如「产品部」下面有「设计组」和「研发组」,你展开产品部就能找到目标,也能看出两个组属于哪里。

  2. 2

    展开分支不等于选中

    点开一个部门只是查看它的下级,选中才会把值填进表单。两种操作分开,你就不容易把「我想看看有哪些组」误当成「我选了整个部门」。

  3. 3

    先说清父节点怎么选

    有些业务允许选「产品部」,有些只允许选具体小组;多选时,选父节点是否连带选中子节点也会影响提交结果。你和 AI 协作时,把这些规则说清楚,才能核对它实现得对不对。

容易混淆的地方

树形控件主要用来浏览层级内容,不一定承担表单填值;树选择则要把选中的节点作为字段值提交。级联选择器通常让你沿着一级、二级逐步选到目标;树选择把各分支放在同一棵树里,适合你需要展开、对照不同分支的情况。

什么时候用

适合用

  • 做员工资料表单时,让管理员从公司、部门、小组的层级里选择员工所属组织。
  • 给后台角色配置可访问的目录,让管理员展开目录树并一次选中多个节点。
  • 给知识库文章选择归档位置,分类有多层,而且编辑时需要看清分类的上下级。

不适合用

  • 选项只有「公开、私密」两种且没有层级时,用单选框更直接。
  • 只是浏览网站栏目、点击后进入页面时,用树形导航或普通链接,不必放进表单控件。
  • 只需要从少量平级选项中选一个,比如选择语言,用普通选择器就够了。

练一练

你在做员工管理后台:公司下面有事业部,事业部下面有部门。新增员工时要选一个具体部门,管理员需要看清部门属于哪个事业部。哪种做法更合适?

让 AI 帮你做

请在新增员工表单中做一个单选树选择字段,用公司、事业部、部门的层级展示选项。可以展开任意分支查看,但只有部门节点能选中;提交时保存部门标识。请区分展开状态和选中状态,并显示当前选中的部门名称。

接下来学什么