Ant Design Vue Checkbox复选框全选反选

全选反选也是实际业务中经常遇到的一个需求，本节将来介绍Ant Design Vue Checkbox中如何实现复选框全选反选。

Checkbox全选反选

<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9',paddingBottom:'10px' }">
       <a-button type="primary" @click="onCheckAll(true)">全选</a-button>
    <a-button  @click="onCheckAll(false)">反选</a-button> 
    </div>
    <br />
    <a-checkbox-group :options="optionos" v-model="checkedList" @change="onChange" />
  </div>
</template>
<script>
  //定义多选框数组
  const optionos = ['Apple', 'Pear', 'Orange','itxst.com']; 
  export default {
    data() {
      return {  
        checkedList:[], //已选中项
        optionos:optionos, //选项
      };
    },
    methods: {
      onChange(checkedList) {
      
      },
      onCheckAll(e) {
         this.checkedList= e  ? this.optionos : []
          
      },
    },
  };
</script>

Ant Design Vue Checkbox全选反选例子