element Tree 树形控件

文档地址

https://element.eleme.cn/#/zh-CN/component/tree

代码地址

https://gitee.com/wBekvam/vue-shop-admin/blob/master/src/components/power/Roles.vue

后台返参

 {
    data: [
      {
        id: 101,
        authName: '商品管理',
        path: null,
        pid: 0,
        children: [
          {
            id: 104,
            authName: '商品列表',
            path: null,
            pid: 101,
            children: [
              {
                id: 105,
                authName: '添加商品',
                path: null,
                pid: '104,101'
              }
            ]
          }
        ]
      }
    ],
    meta: {
      msg: '获取权限列表成功',
      status: 200
    }
  }

html代码

加载数据

常用属性

show-checkbox 显示复选框

node-key 指选中的值为id值

default-expand-all 是否默认展开所有节点

:default-checked-keys="defKeys" 默认选中节点ID值

      <el-tree
        :data="rightsList"
        :props="treeProps"
        ref="treeRef"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="defKeys"
      ></el-tree>

  data () {
    return {
      // 所有角色列表
      rolesList: [],
      // 分配权限框
      setRightDialogVisible: false,
      // 权限列表
      rightsList: [105,106],
      //  树形控件的属性绑定对象
      treeProps: {
        label: 'authName',
        children: 'children'
      },
      //   默认选中节点ID值
      defKeys: [],

      //   当前即将分配权限的Id
      roleId: 0
    }
  },

显示当前角色拥有的所有权限

效果：

 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
      //   console.log(res)
      //   递归获取三级节点的id
      this.getLeafkeys(role, this.defKeys)

      this.setRightDialogVisible = true
    },
    // 通过递归 获取角色下三级权限的 id, 并保存到defKeys数组
    getLeafkeys (node, arr) {
      // 没有children属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => this.getLeafkeys(item, arr))
    },
}

第次关闭时，清空已选中的数组，不然会叠加到下次打开的显示

    // 权限对话框关闭事件
    setRightDialogClosed () {
      this.rightsList = []
    },

获取选中的节点id以逗号分隔发送给后台

方法里

getCheckedKeys 则返回目前被选中的节点的 key

getHalfCheckedNodes 则返回目前半选中的节点的 key

点击确定时调用下面的函数

<el-button type="primary" @click="allotRights">确 定</el-button>

    // 分配权限
    async allotRights (roleId) {
      // 获得当前选中和半选中的Id
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      // join() 方法用于把数组中的所有元素放入一个字符串
      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
    }