Skip to content

Checkbox 多选框

继承el-checkbox所有属性

在一组备选项中进行多选。

基础用法

单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。

禁用状态

多选框不可用状态。

多选框组

适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。

中间状态

indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果

可选项目数量的限制

使用 minmax 属性能够限制可以被勾选的项目的数量。

按钮样式

按钮样式的多选组合。

带有边框

Checkbox API

Checkbox Attributes

属性名说明类型默认值
model-value / v-model选中项绑定值string / number / boolean
value选中状态的值(只有在checkbox-group或者绑定对象类型为array时有效)string / number / boolean / object
label选中状态的值,只有在绑定对象类型为 array 时有效。 如果没有 value, label则作为value使用string / number / boolean / object
disabled是否禁用booleanfalse
sizeCheckbox 的尺寸enum 'large' | 'default' | 'small'
name原生 name 属性string

Checkbox Events

事件名说明类型
change当绑定值变化时触发的事件Function (value: string | number | boolean) => void

Checkbox Slots

插槽名说明
default自定义默认内容

CheckboxGroup API

CheckboxGroup Attributes

属性名说明类型默认值
model-value / v-model绑定值object string[] | number[][]
size多选框组尺寸enum 'large' | 'default' | 'small'
disabled是否禁用booleanfalse
min可被勾选的 checkbox 的最小数量number
max可被勾选的 checkbox 的最大数量number

CheckboxGroup Events

事件名说明类型
change当绑定值变化时触发的事件Function (value: string[] | number[]) => void

CheckboxGroup Slots

插槽名说明子标签
default自定义默认内容Checkbox / Checkbox-button