CheckboxGroup 复选按钮

基本用法(2s后动态更新)

  1. <nut-checkboxgroup
  2. ref="checkboxGroup"
  3. :checkBoxData="data"
  4. v-model="group">
  5. </nut-checkboxgroup>
  6. <p></p>
  7. <nut-button small @click="checkAll(true)">全选</nut-button>
  8. <nut-button small @click="checkAll(false)">取消全选</nut-button>
  9. <nut-button small @click="checkAll()">反选</nut-button>
  1. data() {
  2. return {
  3. data:[
  4. {id:11,value:'选项A',label:'选项A'},
  5. {id:12,value:'选项B',label:'选项B'},
  6. {id:13,value:'选项C',label:'选项C'},
  7. {id:14,value:'选项D',label:'选项D'},
  8. ],
  9. group: ['选项A'],
  10. };
  11. },
  12. mounted(){
  13. setTimeout(() => {
  14. this.group.push('选项B')
  15. }, 2000);
  16. },
  17. methods:{
  18. checkAll(state){
  19. this.$refs.checkboxGroup.toggleAll(state);
  20. }
  21. }

v-model绑定的数组选项对应data的value值,控制选项是否选中,如代码所示,‘选项A’被勾选。如果group为空那么所有选项未选中。

  1. <nut-checkboxgroup
  2. :checkBoxData="['A','B','C','D']">
  3. v-model="group"
  4. </nut-checkboxgroup>
  1. data() {
  2. return {
  3. group: ['A'],
  4. };
  5. }

checkBoxData也可直接在标签中传入数据

禁用状态

data控制禁用状态

  1. <nut-checkboxgroup
  2. :checkBoxData="data2">
  3. </nut-checkboxgroup>
  1. data() {
  2. return {
  3. data2:[
  4. {id:21,value:'选项1',label:'选项1',disabled:true},
  5. {id:22,value:'选项2',label:'选项2',disabled:true},
  6. ],
  7. };
  8. }

标签控制禁用状态(用于全组禁用)

  1. <nut-checkboxgroup
  2. :checkBoxData="data2"
  3. disabled>
  4. </nut-checkboxgroup>
  1. data() {
  2. return {
  3. data2:[
  4. {id:21,value:'选项1',label:'选项1'},
  5. {id:22,value:'选项2',label:'选项2'},
  6. ],
  7. };
  8. }

自定义尺寸

内置 smallbaselarge 三种规格供使用。

  1. <nut-checkboxgroup
  2. :size="'small'"
  3. :checkBoxData="data1" >
  4. </nut-checkboxgroup>
  5. <nut-checkboxgroup
  6. :size="'base'"
  7. :checkBoxData="data2" >
  8. </nut-checkboxgroup>
  9. <nut-checkboxgroup
  10. :size="'small'"
  11. :checkBoxData="data3" >
  12. </nut-checkboxgroup>
  1. data() {
  2. return {
  3. data1:[
  4. {id:41,value:'备选项',label:'备选项'},
  5. ],
  6. data2:[
  7. {id:42,value:'备选项',label:'备选项'},
  8. ],
  9. data3:[
  10. {id:43,value:'备选项',label:'备选项',size:'large'},
  11. ],
  12. };
  13. }

也可用data控制size属性

  1. <nut-checkboxgroup
  2. :checkBoxData="data" v-model="group">
  3. </nut-checkboxgroup>
  1. data() {
  2. return {
  3. data:[
  4. {id:41,value:'1',label:'选项1',size:'large'},
  5. {id:42,value:'2',label:'选项2',size:'base'},
  6. {id:43,value:'3',label:'选项3',size:'small'},
  7. ],
  8. group:['1','2','3'],
  9. };
  10. }

注意:如果data中设置了size,显示data中size属性,data中的size属性优先级高于标签size的设置。

禁用动效

animation属性值为false时,禁用自带动效

  1. <nut-checkboxgroup
  2. :checkBoxData="data"
  3. v-model="group"
  4. :animation="false" >
  5. </nut-checkboxgroup>

横向排列

vertical属性值为true时,横向排列

  1. <nut-checkboxgroup
  2. :checkBoxData="data"
  3. v-model="group"
  4. :vertical="true">
  5. </nut-checkboxgroup>

事件

值发生变化时,将触发change事件

  1. <nut-checkboxgroup
  2. :checkBoxData="data5"
  3. v-model="group"
  4. @change="changeEvt">
  5. </nut-checkboxgroup>
  1. methods: {
  2. changeEvt(val,label,e){
  3. alert('已选值:['+ val+'],当前选择值:'+ label);
  4. }
  5. }

新增自定义class

  1. <nut-checkboxgroup
  2. :customClass="'my-checkbox'"
  3. v-model="group"
  4. :checkBoxData="data6" >
  5. </nut-checkboxgroup>

Prop

字段说明类型默认值
checkBoxData传入选项数组Array-
v-model,value选择项数组,可定义默认选中项Array-
vertical横向排列Booleanfalse
size尺寸,可选值small/base/largeStringbase
disabled是否禁用Booleanfalse
animation是否需要动效Booleantrue
customClass自定义样式String-

Event

字段说明回调参数
change值变化时触发当前已选中项的状态(values),当前选中项值(label),event

CheckboxGroup 方法

通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法

方法名说明参数
toggleAll切换所有复选框的选中状态checked?: boolean

CheckBoxGroup 复选按钮组 - 图1