官方文档: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>
文字颜色:<el-color-picker v-model="style.color" size="small"></el-color-picker>
</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>