界面组件›树形选择

树形选择Tree Select

展开“所有产品”,是在查看子项,还是已经选择全部?

专业定义

树选择把可展开的父子结构与选择输入结合,用户从层级节点中选取一个或多个值。展开、键盘焦点、选中和父子联动是不同状态,需要逐项约定。

大白话

打开一层是为了看里面有什么,勾选才是在决定要哪些。选父级会不会连带子级,还要看这次任务怎么规定。

生活类比

打开文件夹只是看看文件,不代表已经把整个文件夹里的文件发给别人。勾选文件夹是否包含未来新增文件,更是另一条规则。

类比到这里为止:文件夹只是层级类比;权限授权等场景还必须定义继承、例外和新增节点如何处理,不能照搬普通资料筛选。

外贸出海场景

客户从产品树勾选感兴趣的系列。展开一个系列不会替客户选中所有型号,选中结果展示完整路径,以免两处同名型号混淆。

四件事分别观察

展开
某个分支的子节点是否显示。
焦点
键盘下一次操作作用于哪一行。
选择
已经确认了哪些稳定节点 ID。
联动
选父级或子级会怎样改变其余节点。

不要让搜索改变选择含义

搜索后隐藏了部分节点,原来的选择是否保留、全选是否包含隐藏项,都应在界面上说清楚。清空搜索后还能核对完整范围。

如果某节点下的内容没有加载,不应把“目前看见的都选了”直接表述为整个分支全部已选。按真实数据与加载能力确定可承诺的选择范围。

继续看项目应用与交付检查
先建立专业坐标

树形选择 在项目中负责什么

什么时候用
用户需要理解节点所在层级,并可能从不同分支选择对象时。
它解决什么
在保留上下文的同时选取节点,让分散在不同层级的对象仍可明确识别。
它不负责什么
父级勾选是否包含所有后代、仅已加载节点或当前筛选结果,必须明确。部分选中不是完整选中,不能夸大范围。
放进真实项目
管理员为产品分配多级分类,方便客户按行业和用途筛选。
专业拆解 · 业务场景

树形选择适合从复杂层级里选择节点,并需要保留结构语境

企业产品分类、权限目录或知识库目录可能有多层;用户选择一个节点时需要知道它属于哪个分支。

  1. 01

    只在层级本身有业务意义时使用。

  2. 02

    区分展开与选择动作。

  3. 03

    为深层节点显示完整位置。

一句话记住

展开是浏览,选中是决定,联动要说明。

容易混淆的地方

键盘焦点所在行不一定就是已选值。树形外观也不会自动提供树的方向键、展开及辅助技术语义。

随堂一练 用一个判断把概念记住

团队树里有“华东团队”及其两名销售。勾选父节点时是否自动包括两人,应在哪里决定?

你可以这样告诉 AI Agent

“

我在处理这件事:管理员为产品分配多级分类,方便客户按行业和用途筛选。请以“树形选择”为主线,先说明它在这里负责什么、不负责什么;再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答,不确定的信息标为待确认。

内容依据与延伸

本站用原创中文解释把专业概念映射到外贸独立站;定义和机制继续以官方资料为准,业务例子再回到 外贸独立站询盘优化实战 验证。

本站整理说明:原创整理:Web 开发、产品设计、AI 协作与外贸独立站实践
就地查词 · 关闭后继续阅读