vue3-tree-org创建组织架构图简单案例分享

代码环境：Vue3+ElementPlus+TS

使用感受：简单易操作，推荐使用

1. 效果图

2. main.ts导入

import vue3TreeOrg from "vue3-tree-org";
import "vue3-tree-org/lib/vue3-tree-org.css";
const app = createApp(App);
app.use(vue3TreeOrg);

3.主代码

<script setup lang="ts">
import { ElSwitch, ElColorPicker, ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { errorMessage } from "/@/utils/message";
const cloneNodeDrag = ref(true);
const horizontal = ref(false);
const collapsable = ref(true);
const onlyOneNode = ref(false);
const expandLevel = ref(2);
const expandAll = ref(false);
const editDisaled = ref(false);
const labelStyle = ref({
  background: "#108ffe",
  color: "#fff"
});
const dataInfo = ref({});
const data = ref({
  id: 0,
  label: "XXXX科技有限公司",
  leader: "王总",

  children: [
    {
      id: 1,
      pid: 0,
      label: "COO",
      leader: "宋总工",

      children: [
        {
          id: 2,
          pid: 1,
          label: "产品研发部",
          leader: "张三",
          style: { color: "#fff", background: "#108ffe" },
          children: [
            {
              id: 6,
              pid: 2,
              label: "禁止编辑节点",
              leader: "张三1",
              disabled: true
            },
            {
              id: 8,
              pid: 2,
              label: "禁止拖拽节点",
              leader: "张三2",
              noDragging: true
            },
            { id: 10, pid: 2, leader: "张三3", label: "测试" }
          ]
        },
        {
          id: 3,
          pid: 1,
          label: "电气研发部",
          leader: "李工",
          children: [
            {
              id: 11,
              pid: 3,
              label: "研发能力中心",
              leader: "王工"
            },
            {
              id: 12,
              pid: 3,
              label: "平台软件研发",
              leader: "刘工"
            }
          ]
        },
        { id: 4, pid: 1, label: "机械研发部", leader: "刘工", expand: true }
      ]
    }
  ]
});

onMounted(() => {
  try {
    dataInfo.value = data.value;
  } catch (err) {
    errorMessage(err);
  }
});

const beforeDragEnd = (node, targetNode) => {
  console.log("beforeDragEnd");
};

const onNodeClick = (e, data) => {
  ElMessage.info(data.label);
};

const onNodeDblclick = (e, data) => {
  console.log("onNodeDblclick", data);
};
const onMenus = ({ node, command }) => {
  console.log("node", node);
  console.log("command", command);
};

const onExpand = (e, data) => {
  console.log(e, data);
};

// const toggleExpand = (data, val: boolean) => {
//   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>
<template>
  <div>
    <div style="display: flex; padding: 10px">
      <div style="margin-right: 10px">
        <el-switch v-model="horizontal" /> 横向
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="collapsable" /> 可收起
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="editDisaled" />
        禁止编辑
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="onlyOneNode" /> 仅拖动当前节点
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="cloneNodeDrag" /> 拖动节点副本
      </div>
    </div>
    <div style="padding: 0 10px 10px">
      背景色：<el-color-picker
        v-model="labelStyle.background"
        size="small"
      />&nbsp; 文字颜色：<el-color-picker
        v-model="labelStyle.color"
        size="small"
      />&nbsp;
    </div>
    <div style="height: 800px">
      <vue3-tree-org
        :data="dataInfo"
        center
        :horizontal="horizontal"
        :collapsable="collapsable"
        :label-style="labelStyle"
        :only-one-node="onlyOneNode"
        :clone-node-drag="cloneNodeDrag"
        :before-drag-end="beforeDragEnd"
        :default-expand-level="expandLevel"
        :disabled="editDisaled"
        @on-contextmenu="onMenus"
        @on-expand="onExpand"
        @on-node-dblclick="onNodeDblclick"
        @on-node-click="onNodeClick"
        ><template v-slot="{ node }">
          <div class="tree-org-node__text node-label">
            <div class="custom-content">{{ node.label }}</div>
            <div>负责人:{{ node.$$data.leader }}</div>
            <!-- <div v-if="node.label === '平台软件研发' || node.label === '测试'">
              {{ node }}
            </div> -->
          </div>
        </template>
      </vue3-tree-org>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tree-org-node__text {
  text-align: left;
  font-size: 14px;

  .custom-content {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid currentColor;
  }
}
</style>