zoukankan      html  css  js  c++  java
  • elementUI多选框问题( 编辑中选中问题 )

    elementUI多选框问题( 编辑中选中问题 )

    <!--这里是权限的展示    两次for循环-->
    <div v-for="(itemParent, indexParent) in parentChildMap" :key="indexParent">
       <el-form-item class="xxx" :label="itemParent.name + ':'">
           <span v-for="(itemChild, indexChild) in itemParent.children" :key="indexChild" @change="handel(itemChild.id,itemChild.name,itemParent.id,itemChild.parentId)">
               <el-checkbox :label="itemChild.name" :checked="itemChild.checkedFlag"></el-checkbox>
           </span>
       </el-form-item>
    </div>        
    // 获取角色权限列表 复选框的数据   GET请求    复选框选中问题解决(所有数据在当前角色权限数据中调用)
        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 = [];
                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;
            });
          });
        }
    //此方法直接执行
  • 相关阅读:
    php基本语法与安装
    面向对象编程 es5和es6的构造函数
    利用正则搜索替换
    正则特殊符号
    正则边界符 限定符
    面试官给我挖坑:rm删除文件之后,空间就被释放了吗?
    为什么 IPv6 难以取代 IPv4
    Docker系列教程04-Docker构建镜像的三种方式
    Docker系列教程03-Docker私有仓库搭建(registry)
    Linux-I/O模型详解
  • 原文地址:https://www.cnblogs.com/home-/p/11895827.html
Copyright © 2011-2022 走看看