使用Ant Design of Vue中的Checkbox 多选框实现多组全选和全不选

使用Ant Design of Vue中的Checkbox 多选框实现多组全选和全不选

1、实现效果图如下：

2、代码实现如下（采用vue+antd）：

template:

<template>
  <!--多个区全选弹窗-->
  <div class='sale_allot'>
    <a-modal
      :maskClosable='false'
      class='sale_allot'
      title="多个全选弹窗"
      v-model="visible1"
      :bodyStyle="{width:'100%'}"
      height='500px'
    >
      <div style="min-height:300px;">
        <div class='item_check' v-for='(item,index) in totalRolesList' :key='index'>
          <div>
            <div :style="{ borderBottom: '1px solid #E9E9E9',marginTop:'15px'}">
              <a-checkbox :indeterminate="item.indeterminate" :checked="item.checkAll" @change="onCheckAllChange($event,index)">
                {{ item.orgName }}
              </a-checkbox>
            </div>
            <br />
            <a-checkbox-group  v-model="item.checkedList"  :options="item.userList" @change="onChange($event,index)" >
             <span slot='label' slot-scope='{value}'>
                 {{value}}
             </span>
            </a-checkbox-group>
          </div>
        </div>
      </div>
      <template slot="footer">
        <a-button key="back" @click="noOk">
          暂不选择
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="onOk">
          确定选择
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

script部分：

<script>
//多选框的数据
const listData = [
  {
    orgName: "火影村",
    checkAll:false,
    indeterminate : false,
    checkedList : [],
    userList: [
      {
        label: "鸣人",
        value:1
      },
      {
        label: "佐助",
        value: 2
      },
      {
        label: "自来也",
        value: 3
      },
      {
        label: "卡卡西",
        value: 4
      },
      {
        label: "小樱",
        value: 5
      }
    ]
  },
  {
    orgName: "晓组织",
    checkAll:false,
    indeterminate : false,
    checkedList : [],
    userList: [
      {
        label: "佩恩",
        value:1
      },
      {
        label: "角度",
        value: 2
      },
      {
        label: "长门",
        value: 3
      },
      {
        label: "蝎",
        value: 4
      },
      {
        label: "再不斩",
        value: 5
      }
    ]
  }
]
export default {
  props:{
    selectedRowKeys:{
      type:Array,  //类型
      require:false,  //必传
      default:()=> []
    }
  },
  data() {
    return {
      visible1:false,
      totalRolesList:listData,//所有组员角色数据
      loading:false,//确定分配的按钮的响应状态
    }
  },
  methods: {
    onChange(e,index) {//单个选择
      this.totalRolesList[index].indeterminate = !!this.totalRolesList[index].checkedList.length && this.totalRolesList[index].checkedList.length < this.totalRolesList[index].userList.length;
      this.totalRolesList[index].checkAll = this.totalRolesList[index].checkedList.length === this.totalRolesList[index].userList.length;
    },
    onCheckAllChange(e,index) {//选择全部的事件
      //如果选中全选的话就遍历拿出当前相对项的数组的全部值
      let newArr = []
      if(e.target.checked){
        newArr = this.totalRolesList[index].userList.map(item=>{
          return item.value
        })
      }
      this.totalRolesList[index].checkedList = e.target.checked ? newArr:[]
      this.totalRolesList[index].indeterminate = false
      this.totalRolesList[index].checkAll = e.target.checked
    },
    //确定选择
    onOk(){
      //将所有选中的人员的id拿出来拼接到一个数组里面
      let userIds = []
      let sendData = {}
      this.totalRolesList.forEach(item=>{
        userIds = [...userIds,...item.checkedList]
      })
    },
    //暂不选择
    noOk(){
      this.loading=false
      this.visible1 = false
    }
  }
}
</script>

style部分：

<style lang='less'>
.sale_allot.ant-modal{
  width: 700px!important;
}
.sale_allot .ant-modal-body{
  width: 100%;
  overflow: auto;
  max-height: 550px;
}
</style>