element-ui树形组件做权限管理

  • 最近新开了个项目,不巧的是我又要做菜单权限控制这块,再次使用element tree组件,我这次在获取角色权限时直接使用tree组件封装的方法:this.rightIds = [ ...this.$refs.rightTree.getCheckedKeys(), ...this.$refs.rightTree.getHalfCheckedKeys() ];获取tree上勾选和半勾选的菜单即可。
  • 想起上次在tree上加了个change事件,每次都会重复获取之前已经取得的key,很老火,唉。。。。。当时没有想到直接调用方法获取key。
  • 渲染默认勾选,之前的项目是确定了权限的层级,我直接一层一层的遍历的,这次这个项目的权限层级没有确定,这就促使我找方法解决这个问题。我用到了递归获取角色的权限,在tree上使用default-checked-keys属性。
 // 默认勾选
       getleafKey(node, arr) {
           if (!node.menuVoList) {
               arr.push(node.menuId);
           } else {
               node.menuVoList.forEach(item => {
                   this.getleafKey(item, arr);
               });
           }
       },

角色本身是拥有一个树形权限,所有函数中的node,传的是角色对象,递归判断如果没有下级节点时,将节点的key放到数组中。这样就能获取到所有权限(不包含父节点)

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值