树形选择Tree Select
展开“所有产品”,是在查看子项,还是已经选择全部?
树选择把可展开的父子结构与选择输入结合,用户从层级节点中选取一个或多个值。展开、键盘焦点、选中和父子联动是不同状态,需要逐项约定。
打开一层是为了看里面有什么,勾选才是在决定要哪些。选父级会不会连带子级,还要看这次任务怎么规定。
打开文件夹只是看看文件,不代表已经把整个文件夹里的文件发给别人。勾选文件夹是否包含未来新增文件,更是另一条规则。
类比到这里为止:文件夹只是层级类比;权限授权等场景还必须定义继承、例外和新增节点如何处理,不能照搬普通资料筛选。
客户从产品树勾选感兴趣的系列。展开一个系列不会替客户选中所有型号,选中结果展示完整路径,以免两处同名型号混淆。
四件事分别观察
- 展开
- 某个分支的子节点是否显示。
- 焦点
- 键盘下一次操作作用于哪一行。
- 选择
- 已经确认了哪些稳定节点 ID。
- 联动
- 选父级或子级会怎样改变其余节点。
不要让搜索改变选择含义
搜索后隐藏了部分节点,原来的选择是否保留、全选是否包含隐藏项,都应在界面上说清楚。清空搜索后还能核对完整范围。
如果某节点下的内容没有加载,不应把“目前看见的都选了”直接表述为整个分支全部已选。按真实数据与加载能力确定可承诺的选择范围。
继续看项目应用与交付检查
树形选择 在项目中负责什么
- 什么时候用
- 用户需要理解节点所在层级,并可能从不同分支选择对象时。
- 它解决什么
- 在保留上下文的同时选取节点,让分散在不同层级的对象仍可明确识别。
- 它不负责什么
- 父级勾选是否包含所有后代、仅已加载节点或当前筛选结果,必须明确。部分选中不是完整选中,不能夸大范围。
- 放进真实项目
- 管理员为产品分配多级分类,方便客户按行业和用途筛选。
树形选择适合从复杂层级里选择节点,并需要保留结构语境
企业产品分类、权限目录或知识库目录可能有多层;用户选择一个节点时需要知道它属于哪个分支。
- 01
只在层级本身有业务意义时使用。
- 02
区分展开与选择动作。
- 03
为深层节点显示完整位置。
展开是浏览,选中是决定,联动要说明。
容易混淆的地方
键盘焦点所在行不一定就是已选值。树形外观也不会自动提供树的方向键、展开及辅助技术语义。
团队树里有“华东团队”及其两名销售。勾选父节点时是否自动包括两人,应在哪里决定?
你可以这样告诉 AI Agent
“
我在处理这件事:管理员为产品分配多级分类,方便客户按行业和用途筛选。请以“树形选择”为主线,先说明它在这里负责什么、不负责什么;再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答,不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站;定义和机制继续以官方资料为准,业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明:原创整理:Web 开发、产品设计、AI 协作与外贸独立站实践