低代码平台表单设计器 unione form editor 组件介绍--级联组件
低代码平台表单设计器 unione form editor 组件介绍--级联组件
在企业级低代码表单开发中，层级化数据选择是高频场景，如省-市-区选择、部门-岗位-员工层级选择、商品大类-中类-小类筛选等。这类场景若用多个下拉框拼接，不仅配置繁琐，还易出现联动错乱，而级联组件恰好解决这一痛点——它以树形层级结构为核心，实现“选择上级、自动联动下级”的无缝交互，兼顾数据规范性与操作便捷性。unione-form-editor 级联组件，依托丰富的专属配置，支持无限层级联动、树形数据源适配、多选择模式，无需编码即可实现从简单二级联动到复杂多级树形选择的全场景需求，同时兼容字典数据，与下拉选择框的级联功能形成互补，下面详细拆解其核心属性与专属能力。
一、组件属性Tab页：层级联动全掌控，配置灵活无门槛
组件属性Tab页延续同系列组件的“基础属性+表单验证+功能属性+事件设置”四大模块，重点结合级联组件“层级联动、树形数据、多级别选择”的核心特性，新增层级配置、数据源适配、联动规则等专属配置项，既保持操作一致性，又精准匹配层级选择的特殊需求，兼顾易用性与专业性，新手也能快速上手配置。
1. 基础属性：定义组件核心标识与基础信息
与同系列组件（含下拉选择框）基础配置保持一致，同时结合级联组件的层级特性优化提示与标识，明确层级选择用途，降低用户操作疑问，贴合树形层级展示特点：
控件名称：组件的显示名称，用于设计界面快速识别，如“级联组件”“省市区级联”“部门岗位级联”“商品分类级联”，与下拉选择框明确区分；
字段名称：数据存储的唯一标识，需遵循大写字母、数字和下划线组成的规则，且不能是数据库关键字，示例中可配置为“CASCADE_SELECT”“AREA_CASCADE”“DEPARTMENT_CASCADE”等，用于关联后端树形层级类型字段；
字段标题：表单中向用户展示的标签文本，如“选择省市区”“选择部门岗位”“选择商品分类”，明确告知用户层级选择的含义；
默认值：支持设置初始选中的层级选项，可设置单一层级默认值（如默认选中某省份）或完整层级默认值（如默认选中“广东省-深圳市-南山区”），支持数组格式存储完整层级路径，减少用户操作成本；
输入提示：级联选择框的辅助提示文本，引导用户操作，如“点击选择层级选项，上级选择后自动加载下级”“支持多级联动，可直接选择最末级选项”；
层级设置：设置级联组件最多有基层；
控件提示/帮助信息：额外的说明文字，可用于补充层级选择规则、层级数量限制、数据来源等，如“支持三级联动，选择最末级后完成选择”“数据来源于系统字典，实时同步最新层级信息”，降低用户操作疑问。
2. 表单验证：层级选择合规性强保障
针对级联组件的层级选择特性，参考下拉选择框的验证逻辑，新增层级数量、末级选择等专属配置，确保用户选择的层级选项符合业务规范，避免无效、不完整选择，保障数据准确性：
是否必填：开启后用户必须选择完整层级（或指定层级），否则表单无法提交，适用于省市区、部门岗位等核心必填层级场景，与下拉选择框必填逻辑一致；
层级数量校验：专属核心配置，支持设置最小层级数（如至少选择2级）和最大层级数（如最多选择3级），避免选择层级不足或过多，适配不同业务需求（如部分场景仅需选择省、市两级）；
末级选择校验：专属核心配置，可设置“是否必须选择最末级选项”，开启后用户无法停留在上级层级（如仅选择省份无法提交），确保选择的层级数据完整有效，适配需要精准层级数据的场景；
错误提示：自定义校验失败时的提示文案，如“请选择完整的层级选项”“请选择最末级选项”“该层级路径无效，请重新选择”，提升用户体验；
触发机制：设置校验触发时机（如下拉选择后、层级切换时、表单提交时），实时反馈校验结果，避免用户操作完成后才提示违规，兼顾校验实时性与交互流畅度。
3. 功能属性：层级联动与交互体验优化
作为级联组件的核心亮点，功能属性模块在下拉选择框级联功能的基础上，新增层级配置、数据源适配、树形交互等专属配置，兼顾层级联动的精准性与操作便捷性，覆盖绝大多数企业级层级选择场景，贴合级联组件的树形层级核心逻辑，支持无限层级拓展[3]：
数据源配置：支持三种核心配置模式，适配不同层级数据场景——静态字典（手动添加树形层级选项，设置选项名称、选项值、子选项，支持无限层级嵌套）、系统字典（关联平台内置的层级字典，如省市区、部门岗位，自动加载树形结构）、字典接口（关联后端接口，动态获取树形层级数据，实时同步更新），完美适配固定层级与动态层级场景，与下拉选择框的选项配置形成互补，同时支持自定义字段映射规则，适配不同后端数据格式（如指定标签字段、值字段、子节点字段）[2]；
层级模式设置：支持两种核心层级模式——下拉级联（类似下拉选择框，展开后显示层级选项，选择上级后加载下级）、树形级联（以树形结构展示所有层级，支持展开/收起子层级，直观呈现层级关系），可根据表单布局与用户习惯灵活选择，其中树形级联更适配层级较多的场景；
选择模式配置：支持单选、多选两种模式，单选模式适用于单一层级路径选择（如选择单个省市区），多选模式支持选择多个层级路径（如选择多个部门岗位），多选时可设置最多选择数量，同时支持折叠标签显示，避免标签过多占用界面空间；
联动规则配置：专属核心配置，可设置“即时联动”（选择上级后立即加载下级选项）或“确认后联动”（选择上级后，点击确认再加载下级），同时支持设置联动防抖，避免快速切换上级导致的接口请求错乱，提升联动流畅度；还可设置“下级为空时的提示”（如下级无选项时显示“暂无数据”），优化用户体验[5]；
搜索功能：开启后支持关键词搜索层级选项，可设置“搜索所有层级”或“仅搜索当前层级”，快速定位目标选项，适配层级数量较多（如超过20个）的场景，支持搜索防抖，提升搜索体验；
层级分隔符设置：可自定义层级之间的分隔符（如“/”“-”“>”），用于展示完整层级路径（如“广东省/深圳市/南山区”），提升表单展示的可读性，默认分隔符为“/”；
能否清空：开启后级联选择框右侧会出现清空按钮，点击可一键清空所有已选择的层级选项，方便用户重新选择，适配需要批量替换层级数据的场景；
是否只读/禁用/隐藏：灵活控制组件的交互状态，如预览模式下，仅显示已选择的层级路径、不可修改；审批流程中，级联组件禁用，仅可查看完整层级路径；
显示标题：控制字段标题是否在表单中显示，适配紧凑布局或无标题表单设计；
4. 事件设置：层级联动与动态交互逻辑自定义
继承同系列组件（含下拉选择框）的事件能力，针对级联组件“层级切换、展开收起、多路径选择”的核心交互，优化联动逻辑，实现表单的动态响应，满足复杂业务中的层级联动需求，贴合级联组件的树形层级交互特性：
层级变化事件：用户切换上级层级、选择下级选项时触发，可用于联动其他组件（如选择省份后，联动显示该省份的关联数据；选择部门后，联动显示该部门的员工列表），实现即时交互反馈，与下拉选择框的变化事件形成互补，更侧重层级联动反馈；
选择事件：用户确认选择层级选项（尤其是最末级选项）后触发，可用于触发后续业务逻辑，如选择省市区后，自动填充对应区域的编码；选择商品分类后，联动筛选该分类下的商品；
变化事件：层级选择列表发生变化（新增、删除、切换层级）时触发，可用于更新表单相关数据（如显示当前选择的层级路径、校验层级合规性）；
动态标题：根据业务逻辑动态修改字段标题，如根据表单类型，将标题切换为“选择省市区”“选择部门岗位层级”“选择商品分类层级”；
禁用/显示/必填事件：通过条件判断控制组件的禁用、显示/隐藏、必填状态，如当表单类型为“个人表单”时，隐藏“部门岗位级联”组件；当选择“需要精准定位”时，组件必填且需选择最末级；
所有事件均支持代码编辑，可自定义业务逻辑，也可开启“显示代码”查看事件配置详情，灵活适配复杂层级联动场景（如跨组件层级同步、动态调整层级数量限制、自定义层级联动规则），同时支持事件参数传递，可获取当前选中的层级值、层级路径等信息[2]。
二、组件样式Tab页：多端适配与界面美化
与同系列组件保持一致的样式配置体系，同时适配级联组件的界面特性（如下拉层级面板、树形层级结构、层级标签），结合树形层级的可视化设计要点，确保表单整体风格统一，兼顾实用性与美观度，适配多端展示需求：
多端显示：支持单独配置组件在PC端、移动端是否显示，下拉层级面板、树形结构在移动端自动适配屏幕宽度，优化触摸选择、层级展开/收起体验，避免层级过多导致界面溢出；树形级联模式在移动端自动调整布局，提升操作便捷性；
栅格显示：基于24栅格系统，可调节组件在表单中的宽度占比（范围2-24），灵活适配不同布局，如级联组件可设置为占比24，独占一行，方便层级面板展开展示；树形级联模式可设置为占比18，适配表单左右布局；
标题宽度/控件宽度：自定义字段标题和级联选择框的宽度，适配表单整体排版，避免标题过长或选择框过宽/过窄影响操作与美观；同时可设置树形层级的宽度、下拉层级面板的宽度，优化展示效果；
Class名称：支持自定义CSS类名，可通过外部样式文件对组件进行深度美化，如修改级联选择框颜色、边框样式、层级分隔符颜色，调整树形层级的缩进距离、展开/收起图标的样式，适配企业品牌化设计需求；还可自定义弹出框类名，优化层级面板的样式；
层级样式细化：支持设置树形层级的缩进距离、展开/收起图标的样式，设置层级选项的hover效果、选中效果，区分已选中层级与未选中层级；多选模式下，可设置标签的样式、颜色，优化标签展示效果，提升界面美观度与辨识度。
结语
unione-form-editor级联组件，以“层级联动精准、树形适配灵活、多场景覆盖”为核心，既延续了同系列组件的易用性与扩展性，又针对层级选择场景新增了树形模式、无限层级支持、层级分隔符、空状态配置等专属功能，与下拉选择框的级联功能形成互补——下拉选择框级联更适用于简单两级联动，而级联组件可适配从二级到无限层级的复杂场景，无需编写复杂的联动代码，即可快速搭建省市区、部门岗位、商品分类等各类层级选择场景。它完美解决了多下拉框拼接联动的繁琐与错乱问题，有效提升表单开发效率与层级数据的规范性、准确性，适配各类企业级层级选择需求。
作为低代码平台的核心组件，unione-form-editor 始终以“高效、灵活、易用”为核心，除了完善的级联组件，还提供丰富的表单组件、可视化拖拽设计、复杂交互配置等能力，助力开发者快速搭建企业级表单。
目前项目已在GitHub、Gitee开源，欢迎前往点亮Star，获取完整源码、查看详细教程，参与社区共建，一起打造更强大的低代码表单设计工具！
GitHub项目地址：https://github.com/unione-cloud/unione-form-editor
Gitee项目地址：https://gitee.com/unione-cloud/unione-form-editor