Skip to content
On this page

checkbox多选框组件

https://element-plus.org/zh-CN/component/checkbox.html

Hidden Title

基础用法:<s-checkbox v-model="checkboxValue" :options="options"></s-checkbox>

属性事件插槽简介

基础用法

成华主题

石景山主题

通常用法

disabled

多属性用法

插槽用法

自定义间距 gap

属性

属性名说明类型默认值
typeoptions参数的类型, 可以设置为simplestring-
optionscheckbox的选项object{}
showType显示样式,可选 check / buttonstringcheck
label显示的文本对应的字段stringlabel
value后台的值需要的字段stringvalue
showAll是否显示全选booleantrue
attrs控制el-checkbox组件的参数object{}
customDisabled自定义禁用,参数为 { option, index, value }(context) => boolean-
customLabel自定义 label,参数为 { option, index, value }function-
gap多个复选框之间的水平间距,支持 processWidth 写法number/string-
theme主题样式default / chenghua / shijingshandefault
size多选尺寸,支持顶层传入和全局默认配置'' / large / default / small''

方法

属性名说明类型
change值的改变可以通过change事件监听Function

Slots插槽

插槽名说明
default默认可以使用插槽

说明

  • gap 支持 16'16''16px''1rem''5%' 这类常见写法;纯数字或数字字符串会自动补成 px
  • customDisabled 中的 option 是当前选项,index 是选项下标,value 是按 typevalue 属性解析后的实际值。

思云博智私有前端组件库