分配权限树形结构怎么做

1.html结构

<!-- 树形控件  show-checkbox增加可选框   :props="treeProps"绑定属性  node-key="id"每个属性的唯一标识  default-expand-all默认展开所有节点-->
      <!-- :default-checked-keys="defKeys"表示树形控件里面默认选中的权限-->
      <el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>

2.data（）里面定义的数据

 // 所有权限的数据
      rightslist: [],
      // 树形控件的属性绑定对象
      treeProps: {
        label: 'authName',
        children: 'children',
      },
      // 默认选中的权限
      defKeys: [],
      // 当前即将分配权限的角色id
      roleId: '',

3.methods方法：

// 点击打开分配权限的对话框
    async showSetRightDialog(role) {
      this.roleId = role.id
      // 获取所有权限的数据
      const { data: res } = await this.$http.get('rights/tree')

      if (res.meta.status !== 200) {
        return this.$message.error('获取权限数据失败！')
      }

      this.rightslist = res.data

      // 递归获取全部的三级权限（就是想办法将role.id放到defKeys里面去）
      this.getLeafKeys(role, this.defKeys)

      this.setRightDialogVisible = true
    },

    // 通过递归的形式，获取角色下所有三级权限，并保存到 defKeys 数组中
    getLeafKeys(node, arr) {
      // 如果当前 node 节点不包含 children 属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      //如果当前 node 节点包含 children 属性，则继续循环函数，直到当前 node 节点不包含 children 属性（不断循环函数，就是递归）
      node.children.forEach((item) => this.getLeafKeys(item, arr))
    },

    // 监听分配权限对话框的关闭事件
    setRightDialogClosed() {
      // 重置默认选中的节点Id值数组
      this.defKeys = []
    },

    // 点击确定按钮为角色分配权限
    async allotRights() {
      // 将树里面选中的和未选中的节点放到keys里面getCheckedKeys()和getHalfCheckedKeys()是elementui组件里面的方法，分别表示已选中和未选中的数组
      const keys = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
      //将数组转换字符串
      const idStr = keys.join(',')

      const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })

      if (res.meta.status !== 200) {
        return this.$message.error('分配权限失败！')
      }

      this.$message.success('分配权限成功！')
      this.getRolesList()
      this.setRightDialogVisible = false
    },