企业官网建设流程全解析

级联选择器是承载多层级关联选项的单选组件，广泛应用于行政区域选择、多级商品分类、组织架构层级选择、车型配置选配等需层级单选的场景。作为基础选择器的扩展形态，其选项列表结构、拖放交互逻辑均与基础选择器保持一致，核心差异在于需处理多个选项列表之间的级联关联规则。

1️⃣动效效果

以下示例为三级行政区域级联选择器的交互效果。

🔹第一层级为省份：选中省份选项后，下级地市列表将同步更新，仅展示该省份下辖的地市选项。

🔹第二层级为地市：选中地市选项后，下级区县列表将同步联动，仅展示该地市下辖的区县选项。

🔹第三层级为区县：确认区县选项后，可选择将三级选中值组合回填至输入框，也可触发取消操作，放弃本次选择结果。

该组件支持灵活的选择回填规则，无需完整选中三级选项即可完成回填，仅选中省份或地市时也可单独回填对应层级的值。

2️⃣使用方法

1. 将元件库中【标签栏->iPhone17 完整标签栏-浅色主题】组件拖入原型画布，若组件尺寸与原型画布尺寸不匹配，请手动调整组件尺寸以适配画布规格。

2. 根据实际设计需求，依次修改输入框名称、三级选项列表标题及对应中继器表格内容：

• 输入框名称配置

• 选项列表标题配置

• 省份中继器表格配置

• 地市中继器表格配置：表格需包含上级省份字段，以此建立省份与地市数据的关联映射关系。

  请注意默认数据结构规则：每个省份对应的第一条地市数据为空值，对应界面上仅选中省份即可回填的场景。若业务需求要求必须完整选中省、市、区三级选项，请删除地市为空的对应数据行。

• 区县中继器表格配置：与地市表格逻辑一致，需同时包含上级省份、地市两个字段，以此建立三级选项的完整数据关联。

  与地市数据结构规则一致，每个地市对应的第一条区县数据为空值。若业务需求要求必须完整选中三级选项，请删除区县为空的对应数据行。

3️⃣制作方法

🔹设计思路

级联选择器的选项列表生成逻辑、选项拖放交互、档位磁吸停靠、取消操作的列表重置等功能，实现方式与基础选择器完全一致，不熟悉相关逻辑的开发者可参考往期文章【13.基础选择器】，本文不再赘述。本章节重点讲解三级选项列表的关联交互实现逻辑。

• 数据结构层面：省、市、区三级中继器表格的字段为递进扩展关系，地市列表中继器包含省份关联字段，区县列表中继器同时包含省份、地市关联字段。通过中继器的过滤器功能，可根据上级选中项动态筛选下级选项的展示范围：例如选中“江苏省”后，在地市列表中通过省份字段过滤，即可仅展示江苏省下辖的地市选项，区县筛选逻辑与此一致。

• 拖放交互事件可识别当前操作列表的选中项，每次上级列表选中项变更后，需立即重置下级列表的选中状态与展示位置，引导用户重新选择下级选项。

• 选项选中交互事件与选中结果强绑定，触发该事件时选中项已确认。在此事件中新增下级中继器的过滤交互动作，即可同步更新下级列表的筛选结果与选中状态。

• 选项值回填逻辑需匹配三级选项的选中状态：未选中地市时仅回填省份值，未选中区县时回填省份+地市值，选中区县时回填完整三级值。该逻辑需在确定按钮的点击交互事件中实现。

🔹组件结构

组件整体结构与基础选择器一致，仅在弹框内新增了多个关联的选项列表中继器。本文提供的组件默认包含3个选项列表中继器，为最常用的层级配置。若需更多层级，可自行添加对应数量的选项列表中继器，层级间交互逻辑可参考下文“交互逻辑”章节扩展配置。

🔹交互逻辑

1. 省份、地市选项选中交互事件

省份选项选中时，除完成常规变量赋值外，还需为下级地市列表新增以省份选中值为筛选条件的过滤器。

同理，地市选项选中时，需为下级区县列表新增以地市选中值为筛选条件的过滤器。

区县为最后一级选项，选中时无需新增过滤器。

2. 省份内层动态面板拖放交互事件

其中选项拖动计算、省份列表动态变量更新、选中状态刷新、档位校准等交互动作，均与基础选择器逻辑完全一致。

图中红框标注的为新增的下级列表关联处理逻辑，作用是重置地市、区县列表的所有动态变量，恢复其初始状态，符合“上级选项变更后下级需重新选择”的交互逻辑。

3. 地市内层动态面板拖放交互事件

地市内层动态面板的拖放交互逻辑与省份列表一致，仅需处理区县这一个下级列表的状态重置。

4. 区县内层动态面板拖放交互事件

区县作为最后一级，其内层动态面板的拖放交互为标准逻辑，与基础选择器的拖放交互完全一致。

5. 确定按钮点击交互事件

确定按钮的点击交互与基础选择器的核心差异在于回填逻辑的调整，如下图红框区域所示：

• 仅选中省份选项时，仅向输入框回填省份值。

• 选中省份+地市选项时，向输入框回填省份+地市组合值。

• 完整选中三级选项时，向输入框回填省份+地市+区县完整组合值。

4️⃣要点总结

🔹级联选择器是基础选择器的扩展形态，适用于多层级关联选项的选择场景，除行政区域外，还可支持年月日日期选择、组织架构选择、多级商品分类选择等多元场景。

🔹核心通过中继器过滤功能实现层级联动：上级选项选中后，为下级列表配置对应筛选条件，即可精准过滤出匹配上级选项的下级列表，实现层级间的动态关联。

🔹可通过自定义回填逻辑，灵活支持单级、多级组合值的回填需求，适配不同业务场景的选择规则。