UI框架是 ant-design-vue 导出图片我是自己重新写的，要下载 html2canvas
vue-orgchart 属性说明 在 这篇文章中https://blog.csdn.net/weixin_44164867/article/details/110871475
https://balkan.app/OrgChartJS-Demos/ 官网有好多例子可以使用

<template><a-drawertitle="Basic Drawer"placement="top":closable="false":visible="visible"@close="handleOk":destroyOnClose="true"height="700"><div v-if="showAddNode"><a-input placeholder="职位" v-model="position" style="width: 200px"/><a-input placeholder="负责人" v-model="name" style="width: 200px"/><a-button-group><a-button type="primary" @click="addNewNode(1)">添加新节点</a-button><a-button style="background:green;color:#fff" @click="addNewNode(2)">修改当前节点名称</a-button><a-button type="danger"  @click="addNewNode(3)">删除当前节点</a-button></a-button-group></div><div style="width:100%;height:500px;background:#999" ><vo-basic ref="imageWrapper" v-if="Object.keys(chartData).length > 0" style="width:100%;height:500px;" :nodeContent="'nodeContent'" :nodeTemplate="nodeTemplateFun" :createNode="nodeOrg" :pan="true"  :zoom="true" :data="chartData"></vo-basic></div><a-divider orientation="right">操作</a-divider><div style="width:100%;text-align:right"> <a-button type="primary" @click="exportPng">导出图片</a-button></div></a-drawer></template><script>
import { VoBasic } from 'vue-orgchart'
import html2canvas from "html2canvas"
import 'vue-orgchart/dist/style.min.css'
export default {components: { VoBasic },props:{visible:{type:Boolean,default:false,},orgChartData:{type:Object,default:{},require:true,}},data(){return{chartData:{},showAddNode:true,position:null,name:null,selectNode:null,//选中的节点newNode:null,//新节点sumId:0,}},methods:{nodeTemplateFun(age){// console.log("11112",age);},nodeOrg(age){age.onclick = function(){$VueThis.selectNode = this;//当前选中的父节点}},//添加新节点addNewNode(type){let Clength = Object.keys(this.chartData).length;//存在父节点但未选择父节点if(Clength > 0 && !this.selectNode){this.$message.error("请选择父节点");return;}//存在父节点添加子节点if(Clength > 0 && this.selectNode){//取出父节点的idlet dataSource = this.selectNode.getAttribute("data-source");let id = null;if(!!dataSource){try {let dataSourceObject = JSON.parse(dataSource);id = dataSourceObject.id;this.addNode(id,type);} catch (error) {this.$message.error("添加失败")}}else{this.$message.error("添加失败")}return;}this.chartData = {name: this.position,nodeContent:this.name,id:0,}},//创建节点createNode(id){let U =  {name: this.position,nodeContent:this.name,id: this.sumId + 1,parentid:id,}this.sumId = this.sumId + 1;return U;},//添加节点addNode(id,type){let chartData = JSON.parse(JSON.stringify(this.chartData));this.newNode = this.createNode(id);let newChartData = null;if(type == 1){newChartData =  this.recursionAddNewNode(chartData,id);}if(type == 2){newChartData =  this.editNodeName(chartData,id);}if(type == 3){newChartData =  this.delNode(chartData,id);}console.log(newChartData)this.chartData = {};this.selectNode = null;setTimeout(()=>{this.chartData = newChartData;},0)},//删除节点delNode(data,id){if(data.id == id){return true;}else if("children" in data){let children = data.children;if(Array.isArray(children)){for(let i = 0;i<children.length;i++){let d =  this.delNode(children[i],id)console.log("dddd",d);if(!!d){if( Object.prototype.toString.call(d)=="[object Boolean]"){children.splice(i,1);}return data;}}}}},//修改节点名称editNodeName(data,id){if(data.id == id){data.name = this.position;data.nodeContent = this.name;return data;}else if("children" in data){let children = data.children;if(Array.isArray(children)){for(let i = 0;i<children.length;i++){let d =  this.editNodeName(children[i],id)if(!!d){return data;}}}}},//添加节点recursionAddNewNode(data,id){if(data.id == id){if("children" in data){data.children.push(this.newNode);}else{data["children"] = [JSON.parse(JSON.stringify(this.newNode))];this.newNode = null;}return data;}else if("children" in data){let children = data.children;if(Array.isArray(children)){for(let i = 0;i<children.length;i++){let d =  this.recursionAddNewNode(children[i],id)if(!!d){return data;}}}}},//导出exportPng(){html2canvas(document.querySelectorAll(".orgchart")[0]).then(canvas => {let dataURL = canvas.toDataURL("image/png");this.imgUrl = dataURL;if (this.imgUrl !== "") {// this.dialogTableVisible = true;var a = document.createElement('a');// var url = window.URL.createObjectURL(dataURL);var filename = '图片.png';a.href = dataURL;a.download = filename;a.click();//window.URL.revokeObjectURL(url);}});},handleOk(){this.$emit("ok");}},created () {window.$VueThis = this;}
}
</script>