element-ui el-tree 权限列表 父子节点全选节点新增子级也被选中、非全选得不到父节点id的bug修复

问题描述:
在写后台管理是 遇到用el-tree展示权限列表的情况,给角色分配权限时,选择了某一项目前全有的权限,如图:


element-ui el-tree 权限列表 父子节点全选节点新增子级也被选中、非全选得不到父节点id的bug修复_第1张图片
image.png

但是如果之后 我再新增一个子权限 这个子权限也会被默认选中,如图:
首先新增一个 但是我并没有去给任何角色分配此权限


element-ui el-tree 权限列表 父子节点全选节点新增子级也被选中、非全选得不到父节点id的bug修复_第2张图片
image.png

但是:!!what the f**k??
element-ui el-tree 权限列表 父子节点全选节点新增子级也被选中、非全选得不到父节点id的bug修复_第3张图片
image.png

产生原因:当我们在全部选中某一项权限时 权限的父级id也会被加入到我们已选择的权限中 当我们把含有父级id的权限数组传给后端,再请求权限列表时,el-tree检测到里面包含的父级权限的id,就会默认勾选上该父级权限及他下面的所有子权限。

解决办法:

办法1:取消父子级联动效果 使用 check-strictly 属性,

      

办法2,在添加权限和显示已有权限时 过滤掉父级id

第一步,在上传id的时候 过滤掉父级id 这样在之后请求权限列表时就不会有父级id存在,上述问题就不会存在了。但是,会有一个新的bug,如果有一个权限,情况一:他有子级,但是目前子级目前还没有添加上去,也就是他的haveChildFlag 为true,但是目前childList为[ ],或者,情况二:原本是子级,haveChildFlag 为false,后来子级变为父级,haveChildFlag 为true。那么这样的父级我们都应该先视为子级,等他变为父级之后,取消他的选中状态,等待管理员重新分配角色,否则,还是会出现有了父级id,子级(不论是否是新增)被全部选中的情况。
具体实现思路:在提交选中的权限的时候,过滤掉childList.length>0的父级。在请求到权限之后,过滤掉已有权限中childList.length>0的父级。






另一种需求

如果后端要求在上传权限id时,不能过滤掉父级id,那么应该对代码做出修改。

经过调试发现,使用

var  selectedRoleAll = this.$refs.tree.getCheckedNodes();

el-tree只有在子节点全选中时,父节点才是选中状态,selectedRoleAll 中才会有父节点id,当取消一个子节点,父节点就变成了半选状态,此时,应当使用:

var parentArr = this.$refs.tree.getHalfCheckedNodes()

来获取子父节点,然后将两者的id提出来,进行拼接,再将拼接后的数据上传

 [半选节点(父级)id].concat([子节点id]),

注意再看一遍我的属性配置

 

这样就能在子元素非全选的情况下将父节点id上传,但是这样在请求到以后权限的时候,为了避免出现之前的bug,需要将父节点id过滤出来再绑定到
default-checked-keys上,方法与第一种情况中给的一样,不再赘述。
数据:

"content":{
        "allPermissionList":[
            {
                "childList":[
                    {
                        "childList":[],//子级列表
                        "haveChildFlag":false,///根据这个字段判断是不是有没有子级
                        "menuFlag":true,
                        "modelAction":"admin/listRole",
                        "parentLevelId":1,
                        "permissionId":2,
                        "permissionName":"角色管理"
                    },
                    {
                        "childList":[],
                        "haveChildFlag":true,
                        "menuFlag":true,
                        "modelAction":"admin/listPermission",
                        "parentLevelId":1,
                        "permissionId":8,
                        "permissionName":"菜单管理"
                    },
                ],
                "haveChildFlag":true,
                "menuFlag":true,
                "modelAction":"admin",
                "parentLevelId":0,
                "permissionId":1,
                "permissionName":"系统管理"
            },
            {
                "childList":[
                    {
                        "childList":[],
                        "haveChildFlag":false,
                        "menuFlag":false,
                        "modelAction":"terminal/listTerminal",
                        "parentLevelId":6,
                        "permissionId":7,
                        "permissionName":"设备列表"
                    },
                ],
                "haveChildFlag":true,
                "menuFlag":true,
                "modelAction":"terminal",
                "parentLevelId":0,
                "permissionId":6,
                "permissionName":"设备管理"
            },
            {
                "childList":[
                    
                    {
                        "childList":[
                            {
                                "childList":[],
                                "haveChildFlag":false,
                                "menuFlag":true,
                                "modelAction":"dispathTask/yinliu/follow",
                                "parentLevelId":61,
                                "permissionId":63,
                                "permissionName":"关注功能"
                            }
                        ],
                        "haveChildFlag":true,
                        "menuFlag":true,
                        "modelAction":"executeTask/yinliu",
                        "parentLevelId":59,
                        "permissionId":61,
                        "permissionName":"引流功能"
                    },
                    {
                        "childList":[],
                        "haveChildFlag":false,
                        "menuFlag":true,
                        "modelAction":"dispathTask/danxiang",
                        "parentLevelId":59,
                        "permissionId":66,
                        "permissionName":"单项功能"
                    },
                ],
                "haveChildFlag":true,
                "menuFlag":true,
                "modelAction":"dispathTask",
                "parentLevelId":0,
                "permissionId":59,
                "permissionName":"任务下发"
            },
            {
                "childList":[],
                "haveChildFlag":false,
                "menuFlag":false,
                "modelAction":"admin/getCurrentUserInfo",
                "parentLevelId":0,
                "permissionId":78,
                "permissionName":"获取当前用户信息"
            },
        ]
    },

你可能感兴趣的:(element-ui el-tree 权限列表 父子节点全选节点新增子级也被选中、非全选得不到父节点id的bug修复)