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>