返回知识库

界面与交互 · 操作与输入

树形选择TreeSelect

在不均匀的层级里展开看上下文,再选中一个明确节点;选中后显示完整路径,而不是只显示名字。

展开树选一个成员:路径长在摘要卡上

树形选择在不均匀的层级里展开看上下文,再选中一个明确叶子。亲手操作展开、选中、禁用成员和搜索,观察路径条与摘要卡怎样即时变。

第 0 步:这是「指定负责人」的组织选择区。展开部门、选中成员,观察三件事—— 点部门只展开不选中;选中后路径条写明完整部门路径区分同名;离职成员留下但禁用。可在搜索框输入「陈琳」看同名如何靠路径区分。

对照:当前选中「陈琳」,路径是「产品部 / 体验组 / 陈琳」。原因:选中后始终显示完整路径,不靠记忆。下一步:继续展开改选,或点「指定负责人」。

负责人摘要 · 随选中即时变陈琳
完整路径
产品部 / 体验组 / 陈琳
当前状态
已选 · 待确认

选中任一成员,路径与状态会一起变——结果长在物件上,不只靠底部说明。

面板教会的知识点

把刚才操作里看到的现象命名为六条规则。

  • 展开 ≠ 选中:点部门只展开或收起下级,不改变当前选中;点叶子成员才更新选中。
  • 路径区分同名:产品部与工程部都有「陈琳」,选中后摘要写明「产品部 / 体验组 / 陈琳」,不再混淆。
  • 不均匀层级:产品部下分体验组、平台组,工程部却直接挂成员;树能承载深浅不一的真实组织。
  • 禁用可见不可选:已离职的赵磊留在树里、灰掉并标注「已离职」,不是悄悄消失。
  • 搜索在层级里定位:搜「陈琳」会自动展开命中部门并高亮成员,结构上下文不丢。
  • 结果长在物件上:选中后树节点带勾、摘要卡的路径与状态一起变,不必再点确认才生效。

什么时候用树形选择

从层级是否均匀、是否有同名或需要上下文判断,而不是看控件长什么样。

适合

不均匀层级、有同名或需要看上下文才能判断——组织选负责人、目录选文件、权限选节点。

先别用

层级固定且每级相同(→ 级联选择)、选项少而平(→ 选择器)、只需在平铺列表里挑(→ 单选框)。

怎么用:从展开到显示路径

最短路径——标签、展开、选中、路径、必选校验一次到位。

  1. 用 label 写清在选什么;树默认展开到常用层级,减少首次点击。
  2. 展开与选中分开:部门节点只切换展开,成员节点才选中,二者不要合并成一个动作。
  3. 选中后立刻在触发器或摘要上显示完整路径,而不是只显示节点名字。
  4. 不可选节点 disabled 并标注原因;搜索保留路径上下文,避免同名混淆。

正反例:同一个「选负责人」需求

只改一个关键判断——是否给出完整路径来区分同名节点。

正例

组织树选「陈琳」时显示「产品部 / 体验组 / 陈琳」完整路径;离职成员留下但禁用并标注。

反例

平铺下拉只列出两个「陈琳」、无部门无路径 → 用户无法判断,多半选错人或放弃。

快速自测

需求是「让用户在 200 多个不分层的标签里勾选关注方向」,最合适的控件是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。