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; }); }); } //此方法直接执行