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)

实现代码

  
    
         横向
         可收起
         禁止编辑
         仅拖动当前节点
         拖动节点副本
    
    
      背景色： 
      文字颜色： 
    
      
        
        
          
            

            {{ node.label }}
          
        
      
      
  


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);
}

最终效果