el-tree（权限 多选框保存）

分配权限

6.1 调用接口，弹出对话框

6.2 添加tree

  <el-tree :data="rightsList" :props="defaultProps"></el-tree>
 
rightsList: [],
            defaultProps: {
                children: 'children',
                label: 'authName'
 
            },

6.3 添加复选框

 

show-checkbox

6.4选中的时候，希望选中的是id值

6.5 所有节点， 默认都展开

default-expand-all="true"

 

6.6 已有的权限，默认勾选上

:default-checked-keys="defKeys"

项目使用：

 

1获取所有的权限列表

2 获取角色下的权限列表(递归获取角色下所有的三级节点)

将角色下的权限id 都存在 defKey数组即可

就可以得到

注意：

<code class="language-plaintext hljs">    // 展示分配权限的对话框
    async showSetRightDialog(roles) {
      this.rolesId = roles.id
      // 获取所有权限列表
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限列表失败!')
      }
      // 获取到的权限数据保存
      this.rightsList = res.data
      console.log(this.rightsList)
      // 递归获取三级节点
      this.getLeafKeys(roles, this.defKeys)
      this.SetRightDialogVisible = true
    },
    

   // 递归的形式,获取角色下所有的三级权限的id,并保存到 defKeys数组中
    getLeafKeys(node, arr) {
      // 如果当前node没有children属性则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => this.getLeafKeys(item, arr))
    },</code>

6.7 bug

当你点击多个角色的分配权限，你发现后边 角色的已有权限不对了， 多了很多

因为关闭分配角色的时候没有清除权限，长此以往导致权限越来越多

解决：

每次关闭【分配权限】 的时候清空数组

@close="SetRightDialogVisibleClosed"
 
// 监听分配权限对话框的关闭事件
    SetRightDialogVisibleClosed() {
      // 清空 defkeys 数组  避免累积
      this.defKeys = []
    },

6.8 点确定，进行角色授权

获取所以已选中的id 和半选中的ID ，【合并数组】，将【数组】转成【字符串】 ，传送到服务器

怎么获取所以已选中的id (以前有的ID)和半选中的ID （自己添加的id）

 

    async allotRights() {
      const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
      const idStr = keys.join(',')
      const { data: res } = await this.$http.post(`roles/${this.rolesId}/rights`, { rids: idStr })
      if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败!')
      }
      this.$message.success('分配权限成功!')
      this.getRolesList()
      this.SetRightDialogVisible = false
    }

注意： getCheckedKeys，getHalfCheckedKeys 不要写成getHalfCheckedNodes

2 获取成功之后，如果没有清除defKeys，回造成累加，你看的现象是 没有起作用 。记得关闭弹窗，清空数组

3 弹框点确定，拿不到roleId, 需要我们点分配角色的时候，将roleId存起来先