vue3使用orgchart

最新推荐文章于 2025-06-19 09:15:51 发布

赵啸林

最新推荐文章于 2025-06-19 09:15:51 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 JS 文章标签： javascript vue.js npm

本文链接：https://blog.csdn.net/weixin_49295874/article/details/125319884

JS 同时被 2 个专栏收录

56 篇文章

订阅专栏

29 篇文章

订阅专栏

该博客展示了如何在Vue项目中使用orgchart.min.js库创建组织结构图。通过导入图片和定义节点数据，实现了包括总裁、经理及下属咸鱼员工的层次展示，并在页面加载时初始化图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

orgchart.min.js

<template>
  <el-card>
    <div id="tree" ref="tree"></div>
  </el-card>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, ref } from "vue";
import OrgChart from "/@/utils/orgchart.min.js";
import img1 from "/@/assets/head/2.jpg";
import img2 from "/@/assets/head/3.jpg";
import img3 from "/@/assets/head/4.jpg";
import img4 from "/@/assets/head/5.jpg";
import img5 from "/@/assets/head/6.jpg";
import img6 from "/@/assets/head/7.jpg";
import img7 from "/@/assets/head/8.jpg";
import img8 from "/@/assets/head/9.jpg";
export default defineComponent({
  name: "home",
  components: {},
  setup() {
    const tree = ref(null);
    const state = reactive({
      nodes: [
        {
          id: 1,
          name: "李总",
          title: "总裁",
          img: img1,
        },
        {
          id: 2,
          pid: 1,
          name: "邓总",
          title: "经理",
          img: img2,
        },
        {
          id: 3,
          pid: 1,
          name: "张总",
          title: "经理",
          img: img3,
        },
        {
          id: 4,
          pid: 2,
          name: "咸鱼1号",
          title: "咸鱼",
          img: img4,
        },
        {
          id: 5,
          pid: 2,
          name: "咸鱼2号",
          title: "咸鱼",
          img: img5,
        },
        {
          id: 6,
          pid: 3,
          name: "咸鱼3号",
          title: "咸鱼",
          img: img6,
        },
        {
          id: 7,
          pid: 3,
          name: "咸鱼4号",
          title: "咸鱼",
          img: img7,
        },
        {
          id: 8,
          pid: 3,
          name: "咸鱼5号",
          title: "咸鱼",
          img: img8,
        },
      ],
    });
    //页面加载
    onMounted(() => {
      mytree(tree.value, state.nodes);
    });
    const mytree = (domEl, x) => {
      new OrgChart(domEl, {
        nodes: x,
        nodeBinding: {
          field_0: "name",
          img_0: "img",
        },
      });
    };
    return {
      ...toRefs(state),
      tree,
    };
  },
});
</script>

在这里插入图片描述