当前位置：首页 > VUE

vue实现组织架构页面

2026-01-12 02:47:10VUE

Vue 实现组织架构页面

数据准备

组织架构通常以树形结构展示，需要准备嵌套的节点数据。例如：

data() {
  return {
    orgData: {
      id: 1,
      label: '总公司',
      children: [
        {
          id: 2,
          label: '技术部',
          children: [
            { id: 3, label: '前端组' },
            { id: 4, label: '后端组' }
          ]
        }
      ]
    }
  }
}

递归组件实现

使用递归组件渲染无限层级的树状结构：

<template>
  <div class="org-node">
    <div @click="toggle">{{ node.label }}</div>
    <div v-show="isOpen" 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'],
  data() {
    return { isOpen: true }
  },
  methods: {
    toggle() { this.isOpen = !this.isOpen }
  }
}
</script>

可视化布局优化

使用CSS实现缩进和连接线：

.org-node {
  margin-left: 20px;
  position: relative;
}
.org-node::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  height: 100%;
  border-left: 1px dashed #ccc;
}

交互功能扩展

添加节点操作按钮和事件：

<div class="node-actions">
  <button @click.stop="addChild">添加</button>
  <button @click.stop="removeNode">删除</button>
</div>

methods: {
  addChild() {
    if (!this.node.children) {
      this.$set(this.node, 'children', [])
    }
    this.node.children.push({ id: Date.now(), label: '新部门' })
  }
}

第三方库方案

对于复杂需求可使用专业库：

安装依赖：
```
npm install vue-org-tree
```

基础用法：


<template>
<vue-org-tree :data="orgData" :props="propsConfig"/>
</template>

import VueOrgTree from 'vue-org-tree' export default { components: { VueOrgTree }, data() { return { propsConfig: { label: 'name', expand: 'expanded' } } } } ```

性能优化建议

大数据量时采用虚拟滚动：

npm install vue-virtual-scroll-list

示例实现：

<virtual-list :size="50" :remain="20">
  <org-node v-for="item in flatData" :node="item"/>
</virtual-list>

数据持久化

结合后端API实现数据同步：

async loadOrgData() {
  try {
    const res = await axios.get('/api/organization')
    this.orgData = res.data
  } catch (error) {
    console.error(error)
  }
}

vue实现组织架构页面