关于elementUI树状结构的bug

之前在写管理后台的权限控制这一块的时候,使用的是element的树组件,当时还是只做到了菜单的权限,最近才开始做按钮的权限,由于需求不断,总是有新功能,所以就要不断添加按钮,这个时候就发现了一个问题。大概阐述一下我们的业务场景

将菜单侧边栏按照如图的形式添加对应结构,在最后一级添加按钮,然后根据创建好的树形结构去给角色分配对应权限

好,就是这样,这遇到的问题是关乎element的tree选中状态的方式,如果的个人会员这个节点是未选中的,因为子节点不是全部都选中,当子节点全部选中的时候,父节点才会选中,所以某个角色拥有某个菜单的全部权限的时候,就需要选中父节点,然后子节点就全部选中了,这个时候提交,自然就会把父节点的id带过去,此时这个菜单加了个功能,多了个按钮,在上个图片对应的个人会员的位置添加了一个按钮,这个时候再打开配置权限的页面时候,由于之前的父节点是选中的,所以后台也会把父节点返回来,好,问题就来了,我们新添加的按钮其实是没有选中的,但是在页面上呈现的状态却是选中的,一开始的解决办法就是直接点保存,把这个传上去就好了。不过这显然不是长久之计,为了合情合理,还是要把这个问题解决掉。一开始的思路就是遍历树,但是由于复杂度太高,我们的权限有300多个,而且当前的角色所有权限是个一维数组

    var arr = [
        {
            menuId: 1,
            name: "系统管理",
            parentMenu: null
        },
        {
            menuId: 2,
            name: "系统管理",
            parentMenu: null
        },
        {
            menuId: 3,
            name: "系统管理",
            parentMenu: 1
        },
        {
            menuId: 4,
            name: "系统管理",
            parentMenu: 1
        },  {
            menuId: 5,
            name: "系统管理",
            parentMenu: 2
        },
        {
            menuId: 6,
            name: "系统管理",
            parentMenu: 5
        },
        {
            menuId: 7,
            name: "系统管理",
            parentMenu: null
        }
    ]
复制代码

类似于这种,所以由于有些父节点不在,所以不能构成相应的树。这个时候,后台大佬,突然来了一句,用hashmap不就行了,听见了hashmap好像一下子明白了什么。然后,将当前角色对应的权限数据序列化成了一个id为key,value为children数组的一个对象,方法非常简单,

        getNewTree(arr) {
          const allParentId = {}
          arr.forEach(item => {
            if (item.parentId) {
              let flag = false
              Object.keys(allParentId).forEach(itemA => {
                if (itemA == item.parentId) {
                  flag = true
                }
              })
              if (flag) {
                allParentId[item.parentId].push(item)
              } else {
                allParentId[item.parentId] = []
                allParentId[item.parentId].push(item)
              }
            }
          })
          return allParentId
        },
复制代码

得到的数据结构是这样的

这样,我们只需要比较当前角色的权限数据序列化成的对象与所有权限序列化成的对象做对比,

ok,这个reapeatIds里面就是所有添加过的子节点的父节点id了,然后我们在push初始化节点的时候过滤一下就好了。大佬如有更好的办法,麻烦留个言。
最后,,,求一份内推。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值