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", []); });
        });
      });
    }