<el-tab-pane label="配置权限" name="配置权限" style="margin-top:10px;" > <div v-for="(item, index) of getAdminPermissionListAdmin" :key="index"> <!-- 父级权限 --> <el-checkbox :indeterminate="isIndeterminateArray[index]" v-model="checkAllArray[index]" @change="onClickTopAllCheck($event, index)" > {{item.name}} </el-checkbox> <div style="margin: 20px 0;"></div> <!-- 子级权限 --> <el-checkbox-group v-model="getUserPermissionIds" @change="handleCheckedChildPermissionsChange($event, index)"> <el-checkbox v-for="(child, childIndex) in item.permission" :label="child.id" :key="childIndex" > {{child.name}} </el-checkbox> </el-checkbox-group> <div style="margin: 15px 0;"></div> <div style="width: 500px;height: 1px;background: mediumvioletred"></div> </div> </el-tab-pane>
data() { return { // ====================================== // 获取平台所有权限 getAdminPermissionListAdmin: [], // 顶级-是否显示减号 isIndeterminateArray: [], // 当前用户自己所有的权限 getUserPermissionIds: [], // ======================================
}
}
onClickTopAllCheck(isChecked, index){ console.log(‘api------------------------------------onClickTopAllCheck‘) console.log(isChecked, index) const self = this console.log(self.getAdminPermissionListAdmin[index]) // 指定父级菜单:肯定不显示减号 self.isIndeterminateArray[index] = false // 开始遍历指定index的父权限的子权限 for(const item of self.getAdminPermissionListAdmin[index].permission) { const childId = item.id if (isChecked) { // true 说明 全选√ // 全选:已经不存在,则返回-1,则push到自己的权限种 if (self.getUserPermissionIds.indexOf(childId) === -1) { self.getUserPermissionIds.push(childId) } } else { // false 全不选,清空 当前顶级栏目下的自己所有的权限 const childIndex = self.getUserPermissionIds.indexOf(childId) if (childIndex !== -1) { // 不存在返回-1, 存在时清空 self.getUserPermissionIds.splice(childIndex, 1) } } } // console.log(self.allCheckedPermissionIds) }
// 点击子集按钮 onClickSonCheck(arr, index){ console.log(arr, index) console.log(‘api-----------------onClickSonCheck---点击子集按钮‘) const that = this // 打印自己的权限 console.log(that.getUserPermissionIds) console.log(‘自己拥有的权限:选择的索引为x:‘+index) const newPermissionList = that.getAdminPermissionListAdmin[index].permission console.log(newPermissionList) // 遍历平台权限的所有权限 let num = 0 for (const child of newPermissionList) { // 判断当前自己的权限,如果在父级中+1 if (that.getUserPermissionIds.indexOf(child.id) !== -1) { num++ } } console.log(num) console.log(‘xxx‘) console.log(newPermissionList.length) // console.log(‘isIndeterminateArray:‘) // console.log(that.isIndeterminateArray[index]) // console.log(that.checkAllArray[index]) if (num === 0) { console.log(‘000000000000000000000000000000000000000‘) that.$set(that.isIndeterminateArray, index, false) that.$set(that.checkAllArray, index, false) // 如果一个权限也没有,则不显示横杠 // that.isIndeterminateArray[index] = false // that.checkAllArray[index] = false } else if (num === newPermissionList.length) { console.log(‘222222222222222222222222222222222222222222222222222222222222‘) that.$set(that.isIndeterminateArray, index, false) that.$set(that.checkAllArray, index, true) // that.isIndeterminateArray[index] = false // that.checkAllArray[index] = true console.log(‘减号false,全选中true======‘) } else { console.log(‘33333333333333333333333333333333333333333333333333333333333333‘) that.$set(that.isIndeterminateArray, index, true) that.$set(that.checkAllArray, index, false) // 如果有权限,and 总数量不等于平台下的权限 // that.isIndeterminateArray[index] = true // that.checkAllArray[index] = false console.log(‘减号true,全选中false.......√‘) } }
原文:https://www.cnblogs.com/vip-deng-vip/p/12629995.html