zoukankan      html  css  js  c++  java
  • 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", []);
              });
            });
          });
        }
  • 相关阅读:
    HDU 1069 Monkey and Banana
    HDU 1029 Ignatius and the Princess IV
    HDU 1024 Max Sum Plus Plus
    Gym100923H Por Costel and the Match
    Codeforces 682C Alyona and the Tree
    Codeforces 449B Jzzhu and Cities
    Codeforces (ccpc-wannafly camp day2) L. Por Costel and the Semipalindromes
    Codeforces 598D (ccpc-wannafly camp day1) Igor In the Museum
    Codeforces 1167c(ccpc wannafly camp day1) News Distribution 并查集模板
    快乐数问题
  • 原文地址:https://www.cnblogs.com/home-/p/11900326.html
Copyright © 2011-2022 走看看