权限分配vue

<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=" 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