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)```

1
2
3
4
5
6

执行代码

<template>
  <div >
    <div >
      <vue3-tree-org
        :data="state.data"
        :node-draggable="false"
        :horizontal="state.horizontal"
        :label-
        :default-expand-level="3"
        :tool-bar="state.toolBar"
        @on-node-click="onNodeClick"
      />
    </div>
    <div >右边</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

效果

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23