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)">{{Name }}</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 = falsethis.totalRolesList[index].checkAll = e.target.checked},//确定选择onOk(){//将所有选中的人员的id拿出来拼接到一个数组里面let userIds = []let sendData = {}this.totalRolesList.forEach(item=>{userIds = [...userIds,...item.checkedList]})},//暂不选择noOk(){this.loading=falsethis.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>
