vue实现权限树状图
实现权限树状图的方法
在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库的方案。
