vue3-tree-org实现组织架构图展示

简介
安装
代码实现

简介

一个基于vue3.x的简易版组织架构图，官网地址：https://sangtian152.github.io/vue3-tree-org/guide/

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

安装

推荐使用npm安装，它能更好地和webpack打包工具配合使用。而且可以更好的和 es6配合使用。

shell 复制代码

npm i vue3-tree-org -S
# or 
yarn add vue3-tree-org

在 main.js 中写入以下内容：

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.use(vue3TreeOrg)
app.mount('#app')

代码实现

html 复制代码

<template>
    <div class="tree-wrap" style="height: 400px;">
        <vue3-tree-org
            ref="tree"
            :data="data"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            :node-draggable="true"
            :scalable="false"
            :only-one-node="onlyOneNode"
            :default-expand-level="1"
            :clone-node-drag="cloneNodeDrag"
            @on-restore="restore"
            @on-contextmenu="onMenus"
            @on-node-click="onNodeClick"
        />
    </div>
</template>
<script>
export default {
  name: "searchTree",
  data() {
    return {
      data: {
          "id":1,"label":"xxx科技有限公司",
          "children":[
              {
                  "id":2,"pid":1,"label":"产品研发部",
                  "style":{"color":"#fff","background":"#108ffe"},
                  "children":[
                      {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
                      {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
                      {"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":"业务部"}
          ]
      },
      keyword: '',
      horizontal: false,
      collapsable: true,
      onlyOneNode: true,
      cloneNodeDrag: true,
      expandAll: true,
      style: {
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },
  methods: {
    onMenus({ node, command }) {
      console.log(node, command);
    },
    restore() {
        console.log('restore')
    },
    onNodeClick(e, data) {
      this.$Message.info(data.label);
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-wrap {
    position: relative;
    padding-top: 52px;
}
.search-box {
    padding: 8px 15px;
    position: absolute;
    top: 0;
    left: 0;
    input {
        width: 200px;
        height: 32px;
        border:1px solid #ddd;
        outline: none;
        border-radius: 5px;
        padding-left: 10px;
    }
}
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
</style>