vue3 实现组织架构图

插件

组织架构图使用的插件是vue3-tree-org。

一个基于vue3.x的简易版组织架构图。

• 架构图支持拖拽和通过鼠标滚轮缩放
• 支持新增/删除节点
• 支持编辑节点名称
• 支持拖动节点改变树结构
• 支持自定义右键菜单
• 支持slot自定义节点渲染内容
• 支持slot自定义展开按钮渲染内容

使用文档：https://sangtian152.github.io/vue3-tree-org/guide/

Gitee地址：https://gitee.com/sangtian152/vue3-tree-org

Github地址：https://github.com/sangtian152/vue3-tree-org

安装依赖

安装插件的方式很简单，只需要一行命令，建议使用 npm 的方式安装：

npm i vue3-tree-org -S

# or 

yarn add vue3-tree-org

引入插件

在项目的 main.js 文件中引入插件：

import { createApp } from 'vue'

// 引入插件
import vue3TreeOrg from 'vue3-tree-org';
import "vue3-tree-org/lib/vue3-tree-org.css";

const app = createApp(App)

// 添加到app中
app.use(vue3TreeOrg)

app.mount('#app')

使用插件

在页面中使用很简单，下面是一个简单的案例：

<template>
  <div class="ed-page">
    <div class="tree-container">
      <vue3-tree-org :toolBar="{ scale: false, restore: true, expand: false, zoom: false, fullscreen: false }"
        :data="treeData" :props="defaultProps" :label-width="150" :show-label="false" :expand-all="true"
        :draggable="true" :disabled="true" :node-draggable="false" @node-click="handleNodeClick">
        <template #default="{ node }">
          <div class="custom-node">
            <img v-if="node.id === 1" src="@/assets/imgs/vue3.png" alt="公司图标" class="node-icon">
            <span>{{ node.label }}</span>
          </div>
        </template>
      </vue3-tree-org>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

// 树数据
const treeData = ref({
  id: 1,
  label: '公司总部',
  children: [
    {
      id: 2,
      label: '技术部',
      children: [
        { id: 3, label: '前端组' },
        { id: 4, label: '后端组' },
        { id: 5, label: '测试组' }
      ]
    },
    {
      id: 6,
      label: '产品部',
      children: [
        { id: 7, label: '产品规划' },
        { id: 8, label: '用户研究' }
      ]
    },
    {
      id: 9,
      label: '市场部',
      children: [
        { id: 10, label: '市场推广' },
        { id: 11, label: '商务合作' }
      ]
    }
  ]
})

// 默认配置
const defaultProps = {
  children: 'children',
  label: 'label'
}

// 节点点击事件
const handleNodeClick = (node) => {
  console.log('点击节点:', node)
}

</script>
<style scoped lang="scss">
.ed-page {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.tree-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.custom-node {
  display: flex;
  align-items: center;
  padding: 6px 12px;
}

.node-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 4px;
}

/* 取消节点阴影样式 */
::v-deep(.tree-org-node__inner) {
  box-shadow: none !important;
  border: 1px solid #E4E7ED;
}

.ed-info {
  margin-top: 25px;
  background-color: #FFF;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .ed-info-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
}
</style>

下面是效果图：

具体详细的配置可以前往博文最开始的使用文档链接查看。

就这样，拜拜！