Skip to content

Switch 开关

该组件是低代码平台中用于在两种状态之间快速切换的表单项,基于 Element Plus 的 <el-switch> 封装,支持自定义宽高、图标、文字、激活/关闭值及切换拦截逻辑,并深度集成表单容器(<el-form>)的数据绑定与校验体系。

基础属性

属性类型说明
宽度 widthstring开关整体宽度(支持 CSS 单位,如 40px2rem
激活状态图标 activeIconstring开启时显示的图标(如 'ep:check'
关闭状态图标 inactiveIconstring关闭时显示的图标(如 'ep:close'
激活状态文字 activeTextstring开启时显示的文字(如 "开"
关闭状态文字 inactiveTextstring关闭时显示的文字(如 "关"
激活状态值 activeValuefunction返回开关开启时绑定的值(默认返回 true,可为任意类型如 'Y'1 等)
关闭状态值 inactiveValuefunction返回开关关闭时绑定的值(默认返回 false,可为 'N'0 等)
状态改变前函数 beforeChangefunction$args[0]即将切换到的目标值(非当前值),返回 false 可阻止切换(支持异步)
表单项基础配置包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine

⚠️ 注意

  • activeValue / inactiveValue 决定了表单实际提交的值,而非固定 true/false
  • 自定义值映射(如后端要求传 'enabled' / 'disabled'

高级属性

属性类型说明
表单项高级配置包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine

事件

事件触发时机说明
change开关状态切换完成时返回当前绑定的值(即 activeValueinactiveValue 的结果)