当前位置：首页 > VUE

vue实现权限树状图

2026-01-21 20:25:58VUE

实现权限树状图的方法

在Vue中实现权限树状图通常涉及递归组件、数据结构和权限控制逻辑。以下是具体实现步骤：

数据结构设计

权限树的数据结构通常采用嵌套对象或数组形式：

const permissionTree = [
  {
    id: 1,
    name: '系统管理',
    children: [
      {
        id: 11,
        name: '用户管理',
        children: [
          { id: 111, name: '新增用户' },
          { id: 112, name: '删除用户' }
        ]
      }
    ]
  }
]

递归组件实现

创建树形组件PermissionTree.vue：

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      {{ node.name }}
      <permission-tree 
        v-if="node.children && node.children.length" 
        :tree-data="node.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'PermissionTree',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

权限控制集成

在节点渲染时加入权限校验：

<template>
  <ul>
    <li v-for="node in treeData" :key="node.id">
      <template v-if="checkPermission(node.id)">
        {{ node.name }}
        <permission-tree 
          v-if="node.children && node.children.length" 
          :tree-data="node.children"
        />
      </template>
    </li>
  </ul>
</template>

<script>
export default {
  methods: {
    checkPermission(id) {
      return this.userPermissions.includes(id)
    }
  }
}
</script>

使用第三方库

考虑使用现成的树形组件库如element-ui的el-tree：

<template>
  <el-tree
    :data="permissionTree"
    show-checkbox
    node-key="id"
    :default-expand-all="true"
    :props="defaultProps"
  />
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
}
</script>

动态加载优化

对于大型权限树实现懒加载：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: '根节点' }])
  }
  if (node.level > 1) return resolve([])

  axios.get('/api/permissions').then(res => {
    resolve(res.data)
  })
}

样式定制

通过CSS美化树形结构：

ul {
  list-style-type: none;
  padding-left: 20px;
}
li {
  margin: 5px 0;
  position: relative;
}
li:before {
  content: "─";
  position: absolute;
  left: -15px;
}

实现时需注意组件递归深度控制、权限验证逻辑的封装以及大数据量下的性能优化。根据实际需求选择纯手工实现或基于现有UI库的方案。

vue实现权限树状图