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", []);
              });
            });
          });
        }
  • 相关阅读:
    02-NSArray、NSSet、NSDictionary 集合类
    01-结构体NSRange、NSPoint、NSSize、NSRect、及NSString简介
    13-Objective-C特有语法:协议protocol
    12-Objective-C特有语法:(高效率)block数据类型
    Xcode编译器特性:ARC(Automatic Reference Counting)
    11-Objective-C特有语法:内存管理总结
    10-Objective-C特有语法:Category、类对象、description、SEL、NSLog输出增强
    09-Objective-C特有语法:万能指针id及构造方法
    通配符 正则常用对比
    window 远程登录linux
  • 原文地址:https://www.cnblogs.com/home-/p/11900326.html
Copyright © 2011-2022 走看看