实现多个多选框

<template>
	<div>
        <el-dialog :visible.sync='visible' width="30%" title="角色权限" :close-on-click-modal='false'>
        <el-form >
          <el-form-item v-for="(item, index) in powerList" :key="index" class="menuList">
            <el-checkbox
              @change="(val) => handleCheckAllListChange(val, item)"
              :indeterminate="itemIndeterminate(item)"
              v-model="item.checkAll"
              >{{ item.menuName }}</el-checkbox
            >
            <el-checkbox-group
              v-model="checkedData"
              @change="handleCheckedCitiesChange"
              style="padding-left: 30px;"
            >
              <el-checkbox
                style="width: 230px;"
                v-for="items in item.children"
                :key="items.id"
                :label="items"
                >{{ items.menuName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
         <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit()">确 定</el-button>
  </span>
        </el-dialog>
	</div>
</template>
<script>
import request from '@/utils/request'
export default {
	data() {
		return {
		checkedData: [], //选择多选框时选中的值
      // 所有导出数据
      powerList: [],
      visible:false
      
    };
  },
  methods: {
    init() {
            this.visible=true
			request({
				url: '/api/Power',
				method: 'GET',
			}).then((res) => {
				if (res.code == 200) {
					this.powerList = res.data;
                    this.powerList.shift()
				}
			});
		},
  	   
     // 全选
    handleCheckAllListChange(val, item) {
      // 过滤掉没有选中的数据，item.child中不包含v时返回-1
      const filterArr = this.checkedData.filter(
        (v) => item.children.indexOf(v) == -1
      );
      this.checkedData = val ? filterArr.concat(item.children) : filterArr;
      console.log(this.checkedData,item.children,filterArr,'this.checkedData');

    },
    // 是否全选
    itemIndeterminate(item) {

      return (
        item.children.some((v) => this.checkedData.indexOf(v) > -1) &&
        !item.children.every((v) => this.checkedData.indexOf(v) > -1)
      );
    },
    handleCheckedCitiesChange() {
        this.powerList.forEach((item) => {
            this.$set(item,'checkAll',true);
            //item.checkAll = true;
            item.children.forEach((v) => {
                
                    if (!this.checkedData.includes(v)) {      
                        //直接给item加checkAll不能及时渲染到页面上，要等下次的值改变后，才能渲染上次的值
                        // item.checkAll = false;
                        //用$set给item加checkAll属性能及时渲染到页面上
                        this.$set(item,'checkAll',false);
                    }
                 })
            });
    },
  
  }
}
</script>
<style scoped>
.menuList{
    margin-bottom: 20px;
}
</style>