Ant Design Vue教程

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全选反选例子

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 Checkbox 多选框用法 Checkbox 自定义布局 Checkbox 全选反选 Checkbox 属性事件列表 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关