elementUI多选框问题( 编辑问题 )---更新

elementUI多选框问题( 编辑中选中问题 )---更新( 并传值，父子级id全部在一个数组里 )

 

<el-form-item v-for="(it, id) in parentChildMap" :key="id" :label="it.name">
     <el-checkbox-group v-model="it.checkList">
         <el-checkbox :label="item.id" v-for="item in it.children" :key="item.id" :checked="item.checkedFlag">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
      </el-form-item>

 

data:
idArrs: [] //id集合( 传后端 )

　checkList: [],//复选框的值

事件：
submitForm(formName) {
      let arrs = [];
      let brr = [];
      this.parentChildMap.filter(item => {
        if (item.checkList.length != 0) {
          brr = JSON.parse(JSON.stringify(item.checkList));
          brr.unshift(item.id);
          //  console.log(brr, "5555");
          item.ids = brr;
          arrs = [...arrs, ...item.ids];
        }
      });
      this.idArrs = arrs; //id集合   点击提交时触发
      console.log(arrs, "9999999999999");
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.editList();
          this.handelRole();
          this.$refs[formName].resetFields();
          this.$router.go(-1);
        } else {
          this.$message.error("请输入完整");
          return false;
        }
      });
    }

getListRoleList() {
      // 获取 当前 编辑角色的权限数据
      const req = {
        roleId: parseInt(this.$route.query.id)
      };
      roleList(req).then(({ data }) => {
        // 定义接收当前角色的数据
        let currentRolePermissionData = data.data;
        roleManagementPermissionlist().then(({ data }) => {
          this.roleBaseedVal = data.data;
          //使用过滤器先将父集合 和子集合分离出来
          this.roleBaseedVal.filter(item => {
            if (item.menuType == 1) {
              this.parentVal.push(item);
            } else if (item.menuType == 2) {
              this.childBtnVal.push(item);
            }
          });
          //根据parentId和id的相等关系，找出子对应父
          this.parentVal.filter(item => {
            //定义一个空数组，判断关系后重新赋值
            item.children = [];
            // item.parentSwitchFlag = false;
            this.childBtnVal.filter(items => {
              // 遍历当前角色数据 并定义选中与不选中( 在所有的按钮中加一个控制显示隐藏的属性 )
              items.checkedFlag = false;
              for (let i = 0; i < currentRolePermissionData.length; i++) {
                // 判断所有的按钮数据中是否与当前角色id值为一样，如果有值为true选中
                if (items.id == currentRolePermissionData[i].id) {
                  // 值为true时阻止本次循环
                  items.checkedFlag = true;
                  break;
                }
              }
              if (item.id == items.parentId) {
                item.children.push(items);
              }
            });
          });
          //赋值给一个空数组，可以for循环了
          this.parentChildMap = this.parentVal;
          this.parentChildMap.map(itemFlag => {
            this.checkedFlagChild = itemFlag.children.map(itemChildFlag => {
              return itemChildFlag.checkedFlag;
            });
          });
          this.parentChildMap.filter(item => {
            this.$set(item, "checkList", []);
            this.$set(item, "ids", []);
          });
        });
      });
    }