vue3-tree-org实现带照片的组织架构图

官方文档：vue3-tree-org

显示照片需要注意的地方

使用步骤

下载

npm install vue3-tree-org --save

 在main.js中引入

import "vue3-tree-org/lib/vue3-tree-org.css";
import vue3TreeOrg from 'vue3-tree-org';

app.use(vue3TreeOrg)

实现代码

<template>
  <div>
    <div style="display: flex; padding: 10px;">
        <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
        <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
        <div style="margin-right: 10px"><el-switch v-model="disaled"></el-switch> 禁止编辑</div>
        <div style="margin-right: 10px"><el-switch v-model="onlyOneNode"></el-switch> 仅拖动当前节点</div>
        <div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag"></el-switch> 拖动节点副本</div>
    </div>
    <div style="padding: 0 10px 10px">
      背景色：<el-color-picker v-model="style.background" size="small"></el-color-picker>&nbsp;
      文字颜色：<el-color-picker v-model="style.color" size="small"></el-color-picker>&nbsp;
    </div>
      <div style="height: 400px;">
        <vue3-tree-org
          :data="data"
          center
          :horizontal="horizontal"
          :collapsable="collapsable"
          :label-style="style"
          :only-one-node="onlyOneNode"
          :clone-node-drag="cloneNodeDrag"
          :before-drag-end="beforeDragEnd"
          @on-node-drag="nodeDragMove"
          @on-node-drag-end="nodeDragEnd"
          @on-contextmenu="onMenus"
          @on-expand="onExpand"
          @on-node-dblclick="onNodeDblclick"
          @on-node-click="onNodeClick"
                >
        <template #default="{ node }">
          <div>
            <img :src="node.$$data.photo" alt="Node Photo" style="width: 50px; height: 50px;"><br/>
            {{ node.label }}
          </div>
        </template>
      </vue3-tree-org>
      </div>
  </div>
</template>

<script lang="ts" setup>
import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
// import Vue3TreeOrg from 'vue3-tree-org'
import { ref, reactive } from 'vue'

const cloneNodeDrag = ref(true)
const horizontal = ref(false)
const collapsable = ref(true)
const onlyOneNode = ref(false)
const disaled = ref(false)
const style = ref({
  background: "#fff",
  color: "#5e6d82",
})

const data = reactive({
  id: 1,
  label: "xxx科技有限公司",
  photo: "https://img.yzcdn.cn/vant/cat.jpeg",
  children: [
    {
      id: 2,
      pid: 1,
      label: "产品研发部",
      photo: "https://img.yzcdn.cn/vant/cat.jpeg",
      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: "业务部" }
  ]
})

function onMenus({ node, command }) {
  console.log(node, command);
}

function onExpand(e, data) {
  console.log(e, data);
}

function nodeDragMove(data) {
  console.log(data);
}

function beforeDragEnd(node, targetNode) {
  return new Promise((resolve, reject) => {
    if (!targetNode) reject()
    if (node.id === targetNode.id) {
      reject()
    } else {
      resolve()
    }
  })
}

function nodeDragEnd(data, isSelf) {
  console.log(data, isSelf);
}

function onNodeDblclick() {
  console.log('onNodeDblclick')
}

function onNodeClick(e, data) {
  ElMessage.info(data.label);
}
</script>

最终效果