代码环境：Vue3+ElementPlus+TS
使用感受：简单易操作，推荐使用
1. 效果图
2. main.ts导入
import vue3TreeOrg from "vue3-tree-org";
import "vue3-tree-org/lib/vue3-tree-org.css";
const app = createApp(App);
app.use(vue3TreeOrg);3.主代码
<script setup lang="ts">
import { ElSwitch, ElColorPicker, ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { errorMessage } from "/@/utils/message";
const cloneNodeDrag = ref(true);
const horizontal = ref(false);
const collapsable = ref(true);
const onlyOneNode = ref(false);
const expandLevel = ref(2);
const expandAll = ref(false);
const editDisaled = ref(false);
const labelStyle = ref({background: "#108ffe",color: "#fff"
});
const dataInfo = ref({});
const data = ref({id: 0,label: "XXXX科技有限公司",leader: "王总",children: [{id: 1,pid: 0,label: "COO",leader: "宋总工",children: [{id: 2,pid: 1,label: "产品研发部",leader: "张三",style: { color: "#fff", background: "#108ffe" },children: [{id: 6,pid: 2,label: "禁止编辑节点",leader: "张三1",disabled: true},{id: 8,pid: 2,label: "禁止拖拽节点",leader: "张三2",noDragging: true},{ id: 10, pid: 2, leader: "张三3", label: "测试" }]},{id: 3,pid: 1,label: "电气研发部",leader: "李工",children: [{id: 11,pid: 3,label: "研发能力中心",leader: "王工"},{id: 12,pid: 3,label: "平台软件研发",leader: "刘工"}]},{ id: 4, pid: 1, label: "机械研发部", leader: "刘工", expand: true }]}]
});onMounted(() => {try {dataInfo.value = data.value;} catch (err) {errorMessage(err);}
});const beforeDragEnd = (node, targetNode) => {console.log("beforeDragEnd");
};const onNodeClick = (e, data) => {ElMessage.info(data.label);
};const onNodeDblclick = (e, data) => {console.log("onNodeDblclick", data);
};
const onMenus = ({ node, command }) => {console.log("node", node);console.log("command", command);
};const onExpand = (e, data) => {console.log(e, data);
};// const toggleExpand = (data, val: boolean) => {
// if (Array.isArray(data)) {
// data.forEach(item => {
// item.expand = val;
// if (item.children) {
// toggleExpand(item.children, val);
// }
// });
// } else {
// data.expand = val;
// if (data.children) {
// toggleExpand(data.children, val);
// }
// }
// };
</script>
<template><div><div style="display: flex; padding: 10px"><div style="margin-right: 10px"><el-switch v-model="horizontal" /> 横向</div><div style="margin-right: 10px"><el-switch v-model="collapsable" /> 可收起</div><div style="margin-right: 10px"><el-switch v-model="editDisaled" />禁止编辑</div><div style="margin-right: 10px"><el-switch v-model="onlyOneNode" /> 仅拖动当前节点</div><div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag" /> 拖动节点副本</div></div><div style="padding: 0 10px 10px">背景色：<el-color-pickerv-model="labelStyle.background"size="small"/> 文字颜色：<el-color-pickerv-model="labelStyle.color"size="small"/> </div><div style="height: 800px"><vue3-tree-org:data="dataInfo"center:horizontal="horizontal":collapsable="collapsable":label-style="labelStyle":only-one-node="onlyOneNode":clone-node-drag="cloneNodeDrag":before-drag-end="beforeDragEnd":default-expand-level="expandLevel":disabled="editDisaled"@on-contextmenu="onMenus"@on-expand="onExpand"@on-node-dblclick="onNodeDblclick"@on-node-click="onNodeClick"><template v-slot="{ node }"><div class="tree-org-node__text node-label"><div class="custom-content">{{ node.label }}</div><div>负责人:{{ node.$$data.leader }}</div><!-- <div v-if="node.label === '平台软件研发' || node.label === '测试'">{{ node }}</div> --></div></template></vue3-tree-org></div></div>
</template><style lang="scss" scoped>
.tree-org-node__text {text-align: left;font-size: 14px;.custom-content {padding-bottom: 8px;margin-bottom: 8px;border-bottom: 1px solid currentColor;}
}
</style>
