多选框
一组备选项中进行多选。
警告
使用 label 属性作为 value 的用法已被 废弃 ，label 现在只作为展示文本使用，此用法将在 3.0.0 版本中被 移除 ，请考虑切换到新的 API。
提示
新的 API value 已在 2.6.0 版本中添加，文档中的示例都使用了 value。如果您正在使用 低于 2.6.0 的版本并且正在使用 checkbox-group，请参考
vue
<template>
<el-checkbox-group v-model="checkList">
<!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ -->
<el-checkbox label="Option 1" value="Value 1" />
<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
<el-checkbox label="Option 2 & Value 2" />
</el-checkbox-group>
</template>基础用法
Checkbox 可用于在两种状态之间切换。
禁用状态
多选框的禁用状态。
多选框组
适用于多个勾选框绑定成一组，通过是否勾选来表示这一组选项中选中的项。
Options 属性 2.11.2
不确定状态
indeterminate 属性用以实现「全选」的效果。
可选项目数量的限制
min 和 max 属性能够限制可以被勾选的项目的数量。
按钮样式
按钮样式的多选框。
带有边框
Checkbox API
Checkbox 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string / number / boolean | — |
| value 2.6.0 | 当在 `checkbox-group` 中使用时， 复选框的值 | string / number / boolean / object | — |
| label | 在 `checkbox-group` 中使用时复选框的标签。 如果没有值，`label` 将作为 `value` | string / number / boolean / object | — |
| true-value 2.6.0 | 选中时的值 | string / number | — |
| false-value 2.6.0 | 没有选中时的值 | string / number | — |
| disabled | 是否禁用 | boolean | false |
| 边框 | 是否显示边框 | boolean | false |
| size | 多选框的尺寸 | 枚举 | — |
| 名称 | 原生 name 属性 | string | — |
| checked | 当前是否勾选 | boolean | false |
| indeterminate | 设置不确定状态，只负责样式控制 | boolean | false |
| validate-event | 是否触发表单验证 | boolean | true |
| tabindex | 输入框的 tabindex | string / number | — |
| id | 输入框的 id | string | — |
| aria-controls a11y 2.7.2 | 与 aria-controls 相同，当 `indeterminate` 为 `true` 时生效 | string | — |
| aria-label 无障碍 | 原生 aria-label 属性 | string | — |
| true-label 已废弃 | 选中时的值 | string / number | — |
| false-label 已废弃 | 没有选中时的值 | string / number | — |
| controls a11y 已废弃 | 与 aria-controls 相同，当 `indeterminate` 为 `true` 时生效 | string | — |
Checkbox 事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Function |
Checkbox 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
CheckboxGroup API
CheckboxGroup 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | object | [] |
| size | 多选框组尺寸 | 枚举 | — |
| disabled | 是否禁用 | boolean | false |
| min | 可被勾选的 checkbox 的最小数量 | number | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — |
| aria-label a11y 2.7.2 | 原生 aria-label 属性 | string | — |
| text-color | 当按钮为激活状态时的字体颜色 | string | #ffffff |
| 填充色 | 当按钮为激活状态时的边框和背景颜色 | string | #409eff |
| tag | 多选框组的元素标签 | string | div |
| validate-event | 是否触发表单验证 | boolean | true |
| label a11y 已废弃 | 原生 aria-label 属性 | string | — |
| options 2.11.2 | 选项数据，其中 `value` 和 `label` 和 `disabled` 的键名可以通过 `props` 自定义 | array | — |
| props 2.11.2 | 配置选项 | object | {value: 'value', label: 'label', disabled: 'disabled'} |
| type 2.11.5 | 渲染选项的组件类型 (例如 `button`) | 枚举 | 'checkbox' |
CheckboxGroup 事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Function |
CheckboxGroup 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | 多选框 / 多选框按钮 |
CheckboxButton API
CheckboxButton 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value 2.6.0 | 当在 `checkbox-group` 中使用时， 复选框的值 | string / number / boolean / object | — |
| label | 在 `checkbox-group` 中使用时复选框的标签。 如果没有值，`label` 将作为 `value` | string / number / boolean / object | — |
| true-value 2.6.0 | 选中时的值 | string / number | — |
| false-value 2.6.0 | 没有选中时的值 | string / number | — |
| disabled | 是否禁用 | boolean | false |
| 名称 | 原生 name 属性 | string | — |
| checked | 当前是否勾选 | boolean | false |
| true-label 已废弃 | 选中时的值 | string / number | — |
| false-label 已废弃 | 没有选中时的值 | string / number | — |
CheckboxButton 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义默认内容 |
来源
贡献者
