Checkbox 多选框

继承el-checkbox所有属性

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

基础用法

通过 v-model 绑定复选框的勾选状态。

禁用状态

多选框不可用状态。 通过设置 disabled 属性可以禁用复选框。

自定义颜色

通过 active-color 属性可以自定义选中时的颜色。

自定义形状

通过 shape 属性可以自定义复选框的形状，可选值为 square 和 round。

自定义大小

通过 icon-size 属性可以自定义图标的大小。

自定义图标

通过 icon 插槽自定义图标，可以通过 slotProps 判断是否为选中状态.

左侧文本

将 label-position 属性设置为 'left'，可以将文本位置调整到复选框左侧。

禁用文本点击

设置 label-disabled 属性后，点击图标以外的内容不会触发复选框切换。

复选框组

复选框可以与复选框组一起使用，复选框组通过 v-model 数组绑定复选框的勾选状态。

水平排列

将 direction 属性设置为 horizontal 后，复选框组会变成水平排列。

限制最大可选数

通过 max 属性可以限制复选框组的最大可选数。

全选与反选

通过 CheckboxGroup 实例上的 toggleAll 方法可以实现全选与反选。

API

属性

参数	说明	类型	默认值
v-model	绑定值	boolean	false
name	原生 name 属性	string	-
shape	形状，可选值为 square、round	string	round
label	复选框左侧文本	string	-
label-disabled	是否禁用文本点击	boolean	false
label-position	复选框文本位置，可选值为 left、right	string	right
icon-size	图标大小	string	20px
checked-color	选中状态颜色	string	#fff
bindgroup	复选框组实例	CheckboxGroup	-
indeterminate-icon	部分选中状态图标	string	-

Checkbox 方法

方法名	说明	参数
toggle	切换选项	-

Checkbox Slots

名称	说明
default	自定义复选框内容
icon	自定义图标

事件

事件名	说明	参数
change	绑定值变化时触发	value: boolean

CheckboxGroup 属性

参数	说明	类型	默认值
v-model	绑定值	Array<string>	[]
disabled	是否禁用全部选项	boolean	false
max	最大可选数	number	-
direction	排列方向，可选值为 horizontal、vertical	string	vertical
icon-size	图标大小	string	20px
checked-color	选中状态颜色	string	#fff
shape	复选框形状，可选值为 square、round	string	round

CheckboxGroup 方法

方法名	说明	参数
toggleAll	切换所有选项	-
toggleReverse	切换反选选项	-

CheckboxGroup 插槽

名称	说明
default	自定义复选框内容