CheckBox多选框

CheckBox多选框

基础用法

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

在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true，没选中为false。

效果图如下所示:

 

禁用状态

多选框不可选用状态

只需要设置disabled属性即可

效果图如下图所示:

 

多选框组

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

 checkbox-group元素能把多个checkbox管理为一组，只需要在Group中使用v-model绑定Array类型的变量即可。el-checkbox的label属性是该checkbox对应的值，若该标签中无内容，则该属性也充当checkbox按钮后的介绍。label与数组中的元素值相对应的，如果存在指定的值则为选中状态，否则为不选中。

效果图如下所示:

 

 

indeterminate状态

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

效果图如下所示:

 

 

 

可选项目数量的限制

使用min和max属性能够限制可以被勾选的项目的数量

效果图如下图所示:

 

按钮样式

按钮样式多选组合。

只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外，Element还提供了size属性

效果图如小图所示:

 

 

 

 

 

 

 

 

带有边框

设置border属性可以渲染为带有边框的多选框

效果图如下图所示:

 

 

 

 

 

 

 

Checkbox Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string/number/boolean	——	——
label	选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）	string/number/boolean	——	——
true-label	选中时的值	string/number	——	——
false-label	没有选中的值	string/number	——	——
disabled	是否禁用	boolean	——	false
border	是否显示边框	boolean	——	false
size	CheckBox的尺寸，仅在border为真时有效	string	medium/small/mini	——
name	原生name属性	string	——	——
checked	当前是否勾选	boolean	——	false
indeterminate	设置indeterminate状态，只负责样式控制	boolean	——	false

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 CheckBox Events

事件名称	说明	回调函数
change	当绑定值变化时触发的

 

 

 

CheckBox-group Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	array	——	——
size	多选框组尺寸，仅对按钮形式的CheckBox或带有边框的CheckBox有效	string	medium/small/mini	——
disable	是否禁用	boolean	——	false
min	可被勾选的checkbox的最小数量	number	——	——
max	可被勾选的checkbox的最大数量	number	——	——
text-color	按钮形式的checkbox激活时的文本颜色	string	——	#ffffff
fill	按钮形式的checkbox激活时的填充色和边框色	string	——	#409EFF

 

 

 

 

 

 

 

 

 

 

 

 

 

CheckBox-group Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	更新后的值

 

 

 

CheckBox-button Attributes

参数	说明	类型	可选值	默认值
label	选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）	string/number/boolean	——	——
true-label	选中时的值	string / number	——	——
false-label	没有选中时的值	string / number	——	——
disabled	是否禁用	boolean	——	false
name	原生 name 属性	string	——	——
checked	当前是否勾选	boolean	——	false