vue实现组织架构
Vue 实现组织架构
数据准备
组织架构通常以树形结构表示，每个节点包含员工或部门信息。数据格式可能如下：
const orgData = {
id: 1,
name: 'CEO',
children: [
{
id: 2,
name: '技术部',
children: [
{ id: 3, name: '前端组' },
{ id: 4, name: '后端组' }
]
},
{
id: 5,
name: '市场部'
}
]
}递归组件实现
创建可递归渲染的组件OrgNode.vue：
<template>
<div class="org-node">
<div class="node-content">{{ node.name }}</div>
<div v-if="node.children" class="children">
<org-node
v-for="child in node.children"
:key="child.id"
:node="child"
/>
</div>
</div>
</template>
<script>
export default {
name: 'OrgNode',
props: {
node: Object
}
}
</script>
<style>
.org-node {
margin-left: 20px;
}
.children {
border-left: 1px dashed #ccc;
}
</style>主组件集成
在父组件中引入并使用递归组件：
<template>
<div class="org-chart">
<org-node :node="orgData"/>
</div>
</template>
<script>
import OrgNode from './OrgNode.vue'
export default {
components: { OrgNode },
data() {
return {
orgData: {...} // 填入组织数据
}
}
}
</script>交互增强
为节点添加点击事件和展开/折叠功能：
<template>
<div class="org-node">
<div
class="node-content"
@click="toggle"
>
{{ node.name }}
<span v-if="hasChildren">[{{ isOpen ? '-' : '+' }}]</span>
</div>
<div
v-if="node.children && isOpen"
class="children"
>
<org-node
v-for="child in node.children"
:key="child.id"
:node="child"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: true
}
},
computed: {
hasChildren() {
return this.node.children && this.node.children.length
}
},
methods: {
toggle() {
if (this.hasChildren) {
this.isOpen = !this.isOpen
}
}
}
}
</script>可视化优化
使用第三方库如d3-hierarchy实现更专业的可视化布局：
import * as d3 from 'd3-hierarchy'
// 在组件中转换数据格式
const root = d3.hierarchy(orgData)
const treeLayout = d3.tree().size([500, 400])
treeLayout(root)性能考虑
对于大型组织架构，建议：
- 实现虚拟滚动
- 添加懒加载功能
- 使用Vue的keep-alive缓存节点
以上方案可根据实际需求组合使用，基础递归组件适合中小型组织架构，专业可视化方案适合复杂场景。
