vue3+js的组织架构图（vue3-tree-org）

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

安装

npm install vue3-tree-org --save

import vue3TreeOrg from 'vue3-tree-org'
import 'vue3-tree-org/lib/vue3-tree-org.css'
app.use(vue3TreeOrg)```

执行代码

<template>
  <div class="wrap">
    <div class="treeBox">
      <vue3-tree-org
        :data="state.data"
        :node-draggable="false"
        :horizontal="state.horizontal"
        :label-style="state.style"
        :default-expand-level="3"
        :tool-bar="state.toolBar"
        @on-node-click="onNodeClick"
      />
    </div>
    <div class="right">右边</div>
  </div>
  <page-footer />
</template>

<script setup>
import { reactive, onMounted } from 'vue'

const state = reactive({
  data: {
    id: 1,
    label: 'xxx科技有限公司',
    children: [
      {
        id: 2,
        pid: 1,
        label: '产品研发部',
        children: [
          { id: 6, pid: 2, label: '禁止编辑节点' },
          { id: 8, pid: 2, label: '禁止拖拽节点' },
          { id: 10, pid: 2, label: '测试' }
        ]
      },
      {
        id: 3,
        pid: 1,
        label: '客服部',
        children: [
          { id: 11, pid: 3, label: '客服一部' },
          {
            id: 12,
            pid: 3,
            label: '客服二部'
          }
        ]
      },
      { id: 4, pid: 1, label: '业务部' }
    ]
  },
  horizontal: true,
  expandAll: true,
  toolBar: false,
  style: {
    background: '#fff',
    color: '#5e6d82'
  }
})
onMounted(() => {
  toggleExpand(state.data, state.expandAll)
})
function onNodeClick(e, data) {
  console.log('data.label', data.label)
}
function toggleExpand(data, val) {
  if (Array.isArray(data)) {
    data.forEach(item => {
      item.expand = val
      if (item.children) {
        toggleExpand(item.children, val)
      }
    })
  } else {
    data.expand = val
    if (data.children) {
      toggleExpand(data.children, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  height: 90%;
  background: #fff;
  margin: 5px;
  padding: 20px;
  .treeBox {
    width: 50%;
    height: 100%;
    border: 1px solid #c3d0e2;
    ::v-deep .tree-org-node {
      padding-left: 0;
    }
  }
}
</style>

效果

vue3-git地址：https://gitee.com/sangtian152/vue3-tree-org/
vue3-文档：https://sangtian152.github.io/vue3-tree-org/demo/

vue2-文档地址：https://sangtian152.gitee.io/zm-tree-org/#/guide

添加的额外样式后

 style: {
    background: '#fff',
    color: '#5e6d82',
    width: ' 100px',
    boxShadow: 'none',
    border: '1px solid #c3d0e2',
    borderRadius: '5px',
    fontSize: '12px'
  }
  
**这些css放在全局才生效 不要加scoped**
.zm-tree-org {
  height: 96%;
}
.tree-org-node__content .tree-org-node__text {
  padding: 3px;
  font-weight: bold;
}
.horizontal .tree-org-node.is-leaf,
.horizontal .tree-org-node.collapsed {
  padding-top: 0;
  padding-bottom: 0;
}