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;
        });
      });
    }
//此方法直接执行
posted @ 2019-11-20 10:01  写手在作画  阅读(2671)  评论(0编辑  收藏  举报