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>

最终效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46387.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

level 6 day2 网络基础2

1.socket&#xff08;三种套接字&#xff1a;认真看&#xff09; 套接字就是在这个应用空间和内核空间的一个接口&#xff0c;如下图 原始套接字可以从应用层直接访问到网络层&#xff0c;跳过了传输层&#xff0c;比如在ubtan里面直接ping 一个ip地址,他没有经过TCP或者UDP的数…

解决TypeError: __init__() takes 1 positional argument but 2 were given

问题描述&#xff1a; 如下图&#xff0c;在使用torch.nn.Sigmoid非线性激活时报错 源代码&#xff1a; class testrelu(nn.Module):def __init__(self):super().__init__()self.sigmoid Sigmoid()def forward(self, input):output self.sigmoid(input)return outputwriter…

记录贴-芋道源码

环境搭建 文字讲解 链接: 芋道源码-环境搭建&#xff08;一&#xff09;后端 链接: 芋道源码-环境搭建&#xff08;二&#xff09;前端 链接: 基于FastGPT和芋道源码挑战一句话生成代码 视频讲解 链接: 芋道源码零基础启动教程&#xff08;上&#xff09; 链接: 芋道源码零基…

Blackbox AI:你的智能编程伙伴

目录 Blackbox AI 产品介绍 Blackbox AI 产品使用教程 Blackbox AI体验 AI问答 代码验证 实时搜索 探索&代理 拓展集成 总结 Blackbox AI 产品介绍 Blackbox是专门为程序员量身定制的语言大模型&#xff0c;它针对20多种编程语言进行了特别训练和深度优化&#xff0c;在AI代…

React 从入门到实战 一一开发环境基础搭建(小白篇)

React 从入门到实战一一开发环境基础搭建&#xff08;小白篇&#xff09; React 介绍什么是 react &#xff1f;react 主要功能react 框架特点 开发工具渲染测试 React 介绍 最近两年&#xff0c;react 也愈来愈火热&#xff0c;想要在里面分一杯羹&#xff0c;那肯定逃不过 r…

UFS协议

1. 名词解释 UFS: universal flash storage SCSI&#xff1a;小型计算机系统接口 SPC&#xff1a;SCSI Primary Commands SBC&#xff1a; SCSI Block Commands Application Client&#xff1a;作为主机中SCSI命令和任务管理功能请求源的实体。 Device Server&#xff1a;设备…

高级java每日一道面试题-2024年7月17日(java内存模型-后期完善)

面试官: 你对java内存模型了解多少? 我回答: Java内存模型&#xff08;JMM&#xff0c;Java Memory Model&#xff09;是Java虚拟机&#xff08;JVM&#xff09;规范的一部分&#xff0c;它定义了线程之间的内存可见性和并发执行时的原子性、有序性和可见性等特性。理解JMM对…

Windows下使用Cygwin创建rsync服务端

1 下载Cygwin 访问官网Cygwin&#xff0c;点击setup-X86_64.exe即可开始下载 2 安装 前面全部默认。路径可以自己选择&#xff0c;站点选阿里云的&#xff0c;等待安装即可 3 配置 使用打开Cygwin安装后创建的快捷方式窗口&#xff0c;输入下面的指令将windows用户导入到cyg…

C语言中常见库函数(1)——字符函数和字符串函数

文章目录 前言1.字符分类函数2.字符转换函数3.strlen的使用和模拟实现4.strcpy的使用和模拟实现5.strcat的使用和模拟实现6.strncmp的使用和模拟实现7.strncpy函数的使用8.strncat函数的使用9.strncmp函数的使用10.strstr的使用和模拟实现11.strtok函数的使用12.strerror函数的…

物联网平台有哪些?

随着科技的不断进步&#xff0c;物联网&#xff08;IoT&#xff09;已经成为我们生活中不可或缺的一部分。物联网平台作为连接设备、数据和应用的桥梁&#xff0c;扮演着至关重要的角色。本文将介绍一些主流的物联网平台&#xff0c;并特别关注ThingsKit物联网平台。 物联网平…

UE4-系统默认天空球的使用

当我们在调整平行光的时候&#xff0c;会发现场景中的光照改变了&#xff0c;但是太阳的位置并没有改变&#xff0c;此时就需要用到系统默认的天空球中的&#xff1a; 但是只有在选中是由平行光的改变而改变的情况下才会发生改变&#xff0c;如果没有选择或者选择其他的光源&am…

基恩士扫码头程序开发日记

需要获取基恩士扫码枪的扫描数据&#xff0c;并实现与access数据库中的数据进行比对。 一. 引用 下到了的SDK&#xff0c;还选择了Anycpu. 引用中添加了这个dll文件 Communication.dll Keyence.AutoID.SDK.dll VncClientControlCommon.dll using Keyence.AutoID.SDK; 二.遇到…

github.com/antchfx/jsonquery基本使用

要在 GitHub 上使用 antchfx/jsonquery 库来查找 JSON 文档中的元素&#xff0c;首先需要了解这个库的基本用法。jsonquery 是一个用于查询 JSON 数据的 Go 语言库&#xff0c;允许使用 XPath 表达式来查找和选择 JSON 数据中的元素。 以下是一些基本步骤和示例&#xff0c;演…

couldn‘t read native报错!Typora中使用Pandoc导出Word失败的解决方法

couldn‘t read native报错&#xff01;Typora中使用Pandoc导出Word失败的解决方法 一、问题描述 在Typora中使用Pandoc将markdown文件导出为word文件时&#xff0c;发生如下图所示错误: 在网上找了资料以后&#xff0c;发现是因为md文件里面有表格&#xff0c;如果把表格删掉…

学生管理系统(C语言)(Easy-x)

课 程 报 告 课 程 名 称&#xff1a; 程序设计实践 专 业 班 级 &#xff1a; XXXXX XXXXX 学 生 姓 名 &#xff1a; XXX 学 号 &#xff1a; 231040700302 任 课 教 师 &a…

网页制作技术:概念、现状与展望?

网页制作技术&#xff1a;概念、现状与展望&#xff1f; 李升伟 网页制作技术是指用于创建和维护网站的一系列技术和方法。 概念&#xff1a; 它涉及多个方面&#xff0c;包括使用 HTML&#xff08;超文本标记语言&#xff09;来构建网页的结构和内容&#xff0c;使用 CSS&…

Rust Result 与可恢复的错误

Result 与可恢复的错误 大部分错误并没有严重到需要程序完全停止执行。有时&#xff0c;一个函数会因为一个容易理解并做出反应的原因失败。例如&#xff0c;如果因为打开一个并不存在的文件而失败&#xff0c;此时我们可能想要创建这个文件&#xff0c;而不是终止进程。 回忆…

RT-DETR+Flask实现目标检测推理案例

今天&#xff0c;带大家利用RT-DETR&#xff08;我们可以换成任意一个模型&#xff09;Flask来实现一个目标检测平台小案例&#xff0c;其实现效果如下&#xff1a; 目标检测案例 这个案例很简单&#xff0c;就是让我们上传一张图像&#xff0c;随后选择一下置信度&#xff0c;…

GPT LangChain experimental agent - allow dangerous code

题意&#xff1a;GPT LangChain 实验性代理 - 允许危险代码 问题背景&#xff1a; Im creating a chatbot in VS Code where it will receive csv file through a prompt on Streamlit interface. However from the moment that file is loaded, it is showing a message with…

第12章 结构化命令《Linux命令行与Shell脚本编程大全笔记》

12.1 if-then命令 不同于其他语言&#xff0c;if后面不是一个等式&#xff0c;而是命令&#xff0c;如果命令运行成功返回状态码0则运行then语句部分把分号&#xff08;;&#xff09;放到命令尾部&#xff0c;可以将then语句写在同一行 12.4 test命令 格式&#xff1a;if te…