Appearance
checkbox多选框组件
https://element-plus.org/zh-CN/component/checkbox.html
Hidden Title
基础用法:
<s-checkbox v-model="checkboxValue" :options="options"></s-checkbox>属性事件插槽简介
基础用法
成华主题
石景山主题
通常用法
disabled
多属性用法
插槽用法
自定义间距 gap
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | options参数的类型, 可以设置为simple | string | - |
| options | checkbox的选项 | object | {} |
| showType | 显示样式,可选 check / button | string | check |
| label | 显示的文本对应的字段 | string | label |
| value | 后台的值需要的字段 | string | value |
| showAll | 是否显示全选 | boolean | true |
| attrs | 控制el-checkbox组件的参数 | object | {} |
| customDisabled | 自定义禁用,参数为 { option, index, value } | (context) => boolean | - |
| customLabel | 自定义 label,参数为 { option, index, value } | function | - |
| gap | 多个复选框之间的水平间距,支持 processWidth 写法 | number/string | - |
| theme | 主题样式 | default / chenghua / shijingshan | default |
| size | 多选尺寸,支持顶层传入和全局默认配置 | '' / large / default / small | '' |
方法
| 属性名 | 说明 | 类型 |
|---|---|---|
| change | 值的改变可以通过change事件监听 | Function |
Slots插槽
| 插槽名 | 说明 |
|---|---|
| default | 默认可以使用插槽 |
说明
gap支持16、'16'、'16px'、'1rem'、'5%'这类常见写法;纯数字或数字字符串会自动补成px。customDisabled中的option是当前选项,index是选项下标,value是按type和value属性解析后的实际值。