低代码平台表单设计器 unione form editor 组件介绍--复选组件在企业级表单开发中当用户需要从一组关联选项中选择一个或多个结果且选项之间互不互斥时复选组件是最贴合场景的基础控件。它区别于单选组件的“唯一选中”、开关组件的“单一状态切换”核心特点是多值可选、独立勾选、批量操作适合选项数量适中、需要明确展示所有可选项、允许用户自由组合选择的业务场景比如兴趣爱好、权限分配、角色选择、标签勾选、业务类型多选等。unione-form-editor 复选组件延续平台统一配置规范深度对接静态字典、系统字典、字典接口三类数据源支持全选/反选、父子联动、半选状态、单选项禁用、横向/纵向排布、联动交互等完整能力配置逻辑和单选、下拉、标签等组件完全互通无需重复学习即可快速完成标准化多选场景搭建同时遵循行业UI/UX设计规范兼顾操作便捷性与视觉辨识度下面详细拆解其核心属性与专属能力。一、组件属性Tab页多值选择更灵活配置简单易上手组件属性依旧沿用系列统一框架基础属性 表单验证 功能属性 事件设置全文围绕复选组件多值选中、父子联动、批量操作、数据源绑定的核心特性展开配置入口、字段规则、交互逻辑和其他表单组件保持一致新手也能零门槛快速配置。1. 基础属性组件标识与基础展示配置基础属性和平台同系列输入、选择类组件规范完全统一兼顾设计器识别、前端展示、后端数据存储三重需求贴合复选场景多选项展示的特点控件名称表单设计器内部标识名称用于快速区分组件如“复选组件”“兴趣复选”“权限复选”“角色复选”字段名称后端数据存储唯一字段标识遵循大写字母、数字、下划线组合规则不可使用数据库关键字常用配置如CHECKBOX_LIST、PERMISSION_CHECK、ROLE_SELECT、INTERESTS、BUSINESS_TYPE用于存储复选选中值数组字段标题表单前端展示给用户的标签文案如“兴趣爱好”“权限分配”“选择角色”“业务类型”“关联标签”默认值设置表单加载时自动选中的多个选项支持绑定多个选项值如默认选中“阅读”“运动”、默认选中“查看权限”“编辑权限”减少用户手动勾选成本输入提示组件辅助提示文案引导用户理解选择规则如“可选择多个选项”“支持全选/反选操作”控件提示/帮助信息补充说明业务规则如“选项可多选、可全不选互不影响”“勾选父选项将自动选中所有子选项”降低用户理解成本明确复选与单选、开关组件的使用差异[1]。2. 表单验证多选结果合规性强保障针对复选组件可多选、可全不选的核心规则结合业务场景做针对性校验控制杜绝无效提交、非法数据录入、选择数量异常等问题是否必填开启后用户必须选择至少一个选项未选择时表单无法提交适用于权限分配、角色选择、业务类型等必填多选场景选择数量校验复选组件核心校验配置支持设置最小选择数量如至少选择2个、最大选择数量如最多选择5个避免选择过多或过少适配不同业务需求选项合法性校验仅允许选择预设字典内的合法选项禁止手动篡改提交值保证前后端数据一致同时校验选中选项是否为可用状态[2]自定义校验规则支持扩展特殊业务校验如“必须选择至少一个核心权限”“不可同时选择互斥选项”“所选选项需属于同一分类”错误提示自定义校验失败文案如“请至少选择一个选项”“最多选择5个选项”“不可选择互斥选项请重新勾选”“该选项不可选中请重新选择”触发机制支持选项勾选/取消时、表单提交时触发校验实时反馈结果兼顾交互流畅性与数据规范性。3. 功能属性复选组件专属核心配置功能属性聚焦复选组件的展示、数据源、选中控制、批量操作、交互体验做专项设计既保持和平台字典体系互通又突出复选独有的全选、父子联动、半选状态等能力完全贴合企业实际使用场景遵循行业交互规范[1]数据源配置延续平台统一字典规范支持三类数据源无缝切换和单选、下拉、级联、下拉树配置逻辑完全一致 支持选项排序、字段映射适配不同后端返回格式如配置label、value、disabled等属性选项加载稳定不乱序[2]。静态字典手动添加固定选项设置选项名称、选项值、排序序号适合兴趣爱好、固定权限等不变枚举场景系统字典直接复用平台内置公共字典数据无需重复维护适合角色、权限、通用标签等通用基础数据多选字典接口对接后端接口动态获取选项实时同步最新业务数据适合选项会动态更新的多选场景展示布局配置复选核心差异化配置支持横向排布和纵向排布两种模式遵循UI设计规范[1]横向排布选项并排展示占用空间少适合3-5个短文本选项如简单标签、基础权限勾选纵向排布选项垂直展示阅读更清晰适合选项文字较长、选项数量稍多的场景避免换行错乱提升可读性全选/反选配置复选核心便捷操作支持开启“全选按钮”点击可一键选中所有可选选项、一键取消所有选中选项大幅提升多选项勾选效率同时支持“反选”功能快速切换已选/未选状态适配选项数量较多的场景父子联动配置复选组件核心增强能力开启后实现父子选项自动关联遵循行业通用交互规范[1]勾选父选项自动全选所有子选项取消父选项自动取消所有子选项子选项仅部分被勾选时父选项自动显示“半选状态”清晰展示部分选中效果点击半选的父选项自动全选所有子项支持独立关闭父子关联实现父子选项独立勾选互不影响。默认选中配置支持设置多个默认选中项表单初始化时自动回显支持清空默认值适配不同页面初始状态单选项禁用支持对指定选项单独设置禁用被禁用选项只可查看、不可勾选适用于部分选项仅做展示、不允许选择的场景比如已过期权限、下架标签、无权限选项[2]边框样式设置支持给选项添加边框展示把纯文字复选升级为卡片式复选视觉更突出、点击区域更大提升移动端操作体验能否取消选中支持设置是否允许取消已勾选状态开启后可再次点击取消单个选项勾选或通过全选按钮取消所有勾选实现“勾选—取消”灵活控制是否只读/禁用/隐藏全局控制组件交互状态比如流程审批后仅展示已勾选结果、不可修改满足某条件时隐藏整个复选组件显示标题控制字段标题是否展示适配简洁表单、无标题表单、行内紧凑布局4. 事件设置复选联动与动态交互扩展继承平台统一事件体系针对复选勾选/取消、全选/反选、父子联动的核心交互做适配方便实现表单内跨组件联动满足复杂业务逻辑支持多种事件触发与自定义扩展[2]变化事件用户勾选/取消单个选项、点击全选/反选时立即触发为复选最常用联动事件可用于勾选特定选项时显示对应表单项取消勾选时隐藏对应表单项根据勾选数量动态切换其他组件的选项范围、校验规则勾选后自动赋值、计算、接口查询等联动逻辑如勾选权限后联动显示权限关联的操作项。动态标题根据表单其他字段或业务条件动态修改组件标题文案禁用/显示/必填事件根据其他组件值动态控制当前复选组件是否显示、是否必填、是否可编辑所有事件支持可视化配置与自定义代码扩展可直接获取当前选中值数组、选中文本、选项来源、勾选状态等参数复杂逻辑无需从头开发同时支持清除校验、设置禁用状态等操作[2]。二、组件样式Tab页多端适配展示更整洁沿用全系列组件统一样式规范针对复选横向/纵向排布、选项间距、边框样式、半选状态图标做专项适配保证PC端与移动端展示统一、表单整体风格协调贴合复选组件视觉识别需求[1]多端显示支持分别配置PC端、移动端显隐自动适配不同终端布局横向选项在移动端自动换行不挤压、不溢出半选状态、全选按钮在移动端适配触摸操作提升使用体验栅格显示基于24栅格系统灵活设置宽度占比短选项复选可占用较小宽度多选项场景建议独占一行保证选项展示完整标题宽度/控件宽度自定义标题与控件区域宽度适配整体表单排版避免标题过长、布局错乱Class名称支持自定义样式类名可深度修改选中颜色、禁用颜色、边框样式、文字大小、选项间距适配企业品牌UI规范同时可修改半选状态图标、全选按钮样式提升视觉辨识度[1]布局样式优化支持调整选项间距、对齐方式、选中图标样式、半选图标样式区分普通态、选中态、禁用态、半选态视觉效果整体简洁清爽、辨识度高符合UI/UX设计规范[1]。结语复选组件是企业级表单设计器中实现多值选择、批量操作的核心基础组件它填补了单选组件“唯一选中”和开关组件“单一状态切换”的场景空白核心价值在于让用户可自由组合选择、高效完成批量勾选同时通过父子联动、半选状态等设计提升操作便捷性与视觉清晰度[1]。unione-form-editor 复选组件没有过度复杂设计而是把字典互通、布局灵活、校验严谨、联动易用、规范适配做到极致既满足日常简单多选场景也能支撑权限分配、角色管理等复杂业务场景的多选需求。相比于单选组件它支持多值选中适配“可多选、可全不选”的场景相比于标签输入组件它适合选项固定、无需用户自定义新增的场景相比于开关组件它能更高效地处理一组关联选项的批量选择占用视觉空间更小、页面更整洁[1]。全程可视化配置无需手写多选逻辑、父子联动逻辑、样式适配与事件监听开箱即用、稳定可靠。作为低代码平台的核心基础组件unione-form-editor 持续完善表单组件生态覆盖输入、选择、上传、滑块、标签、级联、树形、单选、复选等全场景控件依托Vue 3、TypeScript和Vite构建为企业级应用提供高效、灵活、美观的表单设计解决方案[1]助力开发者高效搭建企业级标准化表单。目前项目已在GitHub、Gitee开源欢迎前往点亮Star获取完整源码、查看详细教程参与社区共建一起打造更强大的低代码表单设计工具GitHub项目地址https://github.com/unione-cloud/unione-form-editorGitee项目地址https://gitee.com/unione-cloud/unione-form-editor
低代码平台表单设计器 unione form editor 组件介绍--复选组件
发布时间：2026/5/15 17:52:24
低代码平台表单设计器 unione form editor 组件介绍--复选组件在企业级表单开发中当用户需要从一组关联选项中选择一个或多个结果且选项之间互不互斥时复选组件是最贴合场景的基础控件。它区别于单选组件的“唯一选中”、开关组件的“单一状态切换”核心特点是多值可选、独立勾选、批量操作适合选项数量适中、需要明确展示所有可选项、允许用户自由组合选择的业务场景比如兴趣爱好、权限分配、角色选择、标签勾选、业务类型多选等。unione-form-editor 复选组件延续平台统一配置规范深度对接静态字典、系统字典、字典接口三类数据源支持全选/反选、父子联动、半选状态、单选项禁用、横向/纵向排布、联动交互等完整能力配置逻辑和单选、下拉、标签等组件完全互通无需重复学习即可快速完成标准化多选场景搭建同时遵循行业UI/UX设计规范兼顾操作便捷性与视觉辨识度下面详细拆解其核心属性与专属能力。一、组件属性Tab页多值选择更灵活配置简单易上手组件属性依旧沿用系列统一框架基础属性 表单验证 功能属性 事件设置全文围绕复选组件多值选中、父子联动、批量操作、数据源绑定的核心特性展开配置入口、字段规则、交互逻辑和其他表单组件保持一致新手也能零门槛快速配置。1. 基础属性组件标识与基础展示配置基础属性和平台同系列输入、选择类组件规范完全统一兼顾设计器识别、前端展示、后端数据存储三重需求贴合复选场景多选项展示的特点控件名称表单设计器内部标识名称用于快速区分组件如“复选组件”“兴趣复选”“权限复选”“角色复选”字段名称后端数据存储唯一字段标识遵循大写字母、数字、下划线组合规则不可使用数据库关键字常用配置如CHECKBOX_LIST、PERMISSION_CHECK、ROLE_SELECT、INTERESTS、BUSINESS_TYPE用于存储复选选中值数组字段标题表单前端展示给用户的标签文案如“兴趣爱好”“权限分配”“选择角色”“业务类型”“关联标签”默认值设置表单加载时自动选中的多个选项支持绑定多个选项值如默认选中“阅读”“运动”、默认选中“查看权限”“编辑权限”减少用户手动勾选成本输入提示组件辅助提示文案引导用户理解选择规则如“可选择多个选项”“支持全选/反选操作”控件提示/帮助信息补充说明业务规则如“选项可多选、可全不选互不影响”“勾选父选项将自动选中所有子选项”降低用户理解成本明确复选与单选、开关组件的使用差异[1]。2. 表单验证多选结果合规性强保障针对复选组件可多选、可全不选的核心规则结合业务场景做针对性校验控制杜绝无效提交、非法数据录入、选择数量异常等问题是否必填开启后用户必须选择至少一个选项未选择时表单无法提交适用于权限分配、角色选择、业务类型等必填多选场景选择数量校验复选组件核心校验配置支持设置最小选择数量如至少选择2个、最大选择数量如最多选择5个避免选择过多或过少适配不同业务需求选项合法性校验仅允许选择预设字典内的合法选项禁止手动篡改提交值保证前后端数据一致同时校验选中选项是否为可用状态[2]自定义校验规则支持扩展特殊业务校验如“必须选择至少一个核心权限”“不可同时选择互斥选项”“所选选项需属于同一分类”错误提示自定义校验失败文案如“请至少选择一个选项”“最多选择5个选项”“不可选择互斥选项请重新勾选”“该选项不可选中请重新选择”触发机制支持选项勾选/取消时、表单提交时触发校验实时反馈结果兼顾交互流畅性与数据规范性。3. 功能属性复选组件专属核心配置功能属性聚焦复选组件的展示、数据源、选中控制、批量操作、交互体验做专项设计既保持和平台字典体系互通又突出复选独有的全选、父子联动、半选状态等能力完全贴合企业实际使用场景遵循行业交互规范[1]数据源配置延续平台统一字典规范支持三类数据源无缝切换和单选、下拉、级联、下拉树配置逻辑完全一致 支持选项排序、字段映射适配不同后端返回格式如配置label、value、disabled等属性选项加载稳定不乱序[2]。静态字典手动添加固定选项设置选项名称、选项值、排序序号适合兴趣爱好、固定权限等不变枚举场景系统字典直接复用平台内置公共字典数据无需重复维护适合角色、权限、通用标签等通用基础数据多选字典接口对接后端接口动态获取选项实时同步最新业务数据适合选项会动态更新的多选场景展示布局配置复选核心差异化配置支持横向排布和纵向排布两种模式遵循UI设计规范[1]横向排布选项并排展示占用空间少适合3-5个短文本选项如简单标签、基础权限勾选纵向排布选项垂直展示阅读更清晰适合选项文字较长、选项数量稍多的场景避免换行错乱提升可读性全选/反选配置复选核心便捷操作支持开启“全选按钮”点击可一键选中所有可选选项、一键取消所有选中选项大幅提升多选项勾选效率同时支持“反选”功能快速切换已选/未选状态适配选项数量较多的场景父子联动配置复选组件核心增强能力开启后实现父子选项自动关联遵循行业通用交互规范[1]勾选父选项自动全选所有子选项取消父选项自动取消所有子选项子选项仅部分被勾选时父选项自动显示“半选状态”清晰展示部分选中效果点击半选的父选项自动全选所有子项支持独立关闭父子关联实现父子选项独立勾选互不影响。默认选中配置支持设置多个默认选中项表单初始化时自动回显支持清空默认值适配不同页面初始状态单选项禁用支持对指定选项单独设置禁用被禁用选项只可查看、不可勾选适用于部分选项仅做展示、不允许选择的场景比如已过期权限、下架标签、无权限选项[2]边框样式设置支持给选项添加边框展示把纯文字复选升级为卡片式复选视觉更突出、点击区域更大提升移动端操作体验能否取消选中支持设置是否允许取消已勾选状态开启后可再次点击取消单个选项勾选或通过全选按钮取消所有勾选实现“勾选—取消”灵活控制是否只读/禁用/隐藏全局控制组件交互状态比如流程审批后仅展示已勾选结果、不可修改满足某条件时隐藏整个复选组件显示标题控制字段标题是否展示适配简洁表单、无标题表单、行内紧凑布局4. 事件设置复选联动与动态交互扩展继承平台统一事件体系针对复选勾选/取消、全选/反选、父子联动的核心交互做适配方便实现表单内跨组件联动满足复杂业务逻辑支持多种事件触发与自定义扩展[2]变化事件用户勾选/取消单个选项、点击全选/反选时立即触发为复选最常用联动事件可用于勾选特定选项时显示对应表单项取消勾选时隐藏对应表单项根据勾选数量动态切换其他组件的选项范围、校验规则勾选后自动赋值、计算、接口查询等联动逻辑如勾选权限后联动显示权限关联的操作项。动态标题根据表单其他字段或业务条件动态修改组件标题文案禁用/显示/必填事件根据其他组件值动态控制当前复选组件是否显示、是否必填、是否可编辑所有事件支持可视化配置与自定义代码扩展可直接获取当前选中值数组、选中文本、选项来源、勾选状态等参数复杂逻辑无需从头开发同时支持清除校验、设置禁用状态等操作[2]。二、组件样式Tab页多端适配展示更整洁沿用全系列组件统一样式规范针对复选横向/纵向排布、选项间距、边框样式、半选状态图标做专项适配保证PC端与移动端展示统一、表单整体风格协调贴合复选组件视觉识别需求[1]多端显示支持分别配置PC端、移动端显隐自动适配不同终端布局横向选项在移动端自动换行不挤压、不溢出半选状态、全选按钮在移动端适配触摸操作提升使用体验栅格显示基于24栅格系统灵活设置宽度占比短选项复选可占用较小宽度多选项场景建议独占一行保证选项展示完整标题宽度/控件宽度自定义标题与控件区域宽度适配整体表单排版避免标题过长、布局错乱Class名称支持自定义样式类名可深度修改选中颜色、禁用颜色、边框样式、文字大小、选项间距适配企业品牌UI规范同时可修改半选状态图标、全选按钮样式提升视觉辨识度[1]布局样式优化支持调整选项间距、对齐方式、选中图标样式、半选图标样式区分普通态、选中态、禁用态、半选态视觉效果整体简洁清爽、辨识度高符合UI/UX设计规范[1]。结语复选组件是企业级表单设计器中实现多值选择、批量操作的核心基础组件它填补了单选组件“唯一选中”和开关组件“单一状态切换”的场景空白核心价值在于让用户可自由组合选择、高效完成批量勾选同时通过父子联动、半选状态等设计提升操作便捷性与视觉清晰度[1]。unione-form-editor 复选组件没有过度复杂设计而是把字典互通、布局灵活、校验严谨、联动易用、规范适配做到极致既满足日常简单多选场景也能支撑权限分配、角色管理等复杂业务场景的多选需求。相比于单选组件它支持多值选中适配“可多选、可全不选”的场景相比于标签输入组件它适合选项固定、无需用户自定义新增的场景相比于开关组件它能更高效地处理一组关联选项的批量选择占用视觉空间更小、页面更整洁[1]。全程可视化配置无需手写多选逻辑、父子联动逻辑、样式适配与事件监听开箱即用、稳定可靠。作为低代码平台的核心基础组件unione-form-editor 持续完善表单组件生态覆盖输入、选择、上传、滑块、标签、级联、树形、单选、复选等全场景控件依托Vue 3、TypeScript和Vite构建为企业级应用提供高效、灵活、美观的表单设计解决方案[1]助力开发者高效搭建企业级标准化表单。目前项目已在GitHub、Gitee开源欢迎前往点亮Star获取完整源码、查看详细教程参与社区共建一起打造更强大的低代码表单设计工具GitHub项目地址https://github.com/unione-cloud/unione-form-editorGitee项目地址https://gitee.com/unione-cloud/unione-form-editor
