界面组件 深入了解 C · 行业惯例 平台: 网页

Tree Select

树选择器

树选择器用可展开的树显示嵌套选项。它可支持单选或多选。

动手试试看
也有人这样说 Tree Select层级选择树形选择器

动手试试看

树选择器
分配部门
产品
工程
尚未选择部门

生活中的例子

管理员把报表分配给团队。选择时仍能看到公司和部门层级。

主要部分

  1. 01持续显示的标签
  2. 02输入控件
  3. 03提示或格式
  4. 04验证信息

什么时候用

选择一个或多个项目时,仍要看见层级关系,就适合使用。

什么时候不要用

不要把大树塞进小弹窗。如果必须这样做,要有搜索、虚拟滚动和部分选中状态。

代码里的名称

role=tree + treeitem + selection state

上线前要检查

每个字段都要有程序能读到的标签。关联提示与错误,并保留已输入内容。检查自动填充、键盘顺序、验证时机、提交状态、失败恢复、缩放与多语言。

可以直接复制的需求

预期结果:使用 树选择器 (Tree Select) 解决这项需求,同时保留用户当前的操作上下文。 用户场景:管理员把报表分配给团队。选择时仍能看到公司和部门层级。 建议界面模式:树选择器 (Tree Select)。 适用理由:选择一个或多个项目时,仍要看见层级关系,就适合使用。 不应使用的情况:不要把大树塞进小弹窗。如果必须这样做,要有搜索、虚拟滚动和部分选中状态。 产品要求:定义默认、加载、没有内容、错误、成功与恢复状态。保留用户已输入的内容,每个操作后都提供清楚反馈。 无障碍与韧性:使用结构正确的 HTML(语义化 HTML)和完整键盘操作。焦点要清楚可见,布局缩放后仍要好用。也要提供减少动态效果。遵守项目现有规则。除非项目已采用,否则不要新增界面组件库。 验收标准:主要任务可只用键盘完成,在 320px 宽度也能正常使用。焦点与状态变化可被辅助工具读出。加载、失败、重试、取消与减少动态效果都已验证。 证据与限制(证据边界):没有一份官方标准能涵盖全部内容。不同团队、平台或框架的用法可能不同。 待确认:产品文字、数据来源、分析事件、支持设备与语言,以及平台特有限制。

检查这份需求

请 AI 编程助手检查当前如何使用 树选择器 (Tree Select)。 定义:树选择器用可展开的树显示嵌套选项。它可支持单选或多选。 生产环境检查:每个字段都要有程序能读到的标签。关联提示与错误,并保留已输入内容。检查自动填充、键盘顺序、验证时机、提交状态、失败恢复、缩放与多语言。 修改程序前,先列出看到的证据、缺口、严重程度,以及最小且安全的修正。

C
这个术语有多正式?

行业惯例

工作中经常会用到这个术语。列出的来源可能说明用法或限制,但不会定义全部内容。

没有一份官方标准能涵盖全部内容。不同团队、平台或框架的用法可能不同。

适用范围
只包含来源有说明的内容:正式名称、定义、语义、实现、交互行为、键盘行为、无障碍
文档状态
正式推荐标准
核验日期
2026-07-30

证据来源与适用范围

正式来源 · W3C · 正式推荐标准 Accessible Rich Internet Applications (WAI-ARIA) 1.2 适用范围: 正式名称、定义、语义、实现 本页用途: 提供背景,不是正式定义 来源涵盖内容: 正式名称, 定义, 语义, 实现 正式来源 · W3C WAI · 稳定 ARIA Authoring Practices Guide 适用范围: 正式名称、定义、交互行为、键盘行为、无障碍 本页用途: 提供背景,不是正式定义 来源涵盖内容: 正式名称, 定义, 交互行为, 键盘行为, 无障碍

自行复制

浏览器无法自动复制。请选择下方文字,再自行复制。