vue3-tree-org实现带照片的组织架构图

news2024/11/14 14:56:57

官方文档: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.coloradmin.cn/o/1931244.html

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

相关文章

【简历】郑州某二本学院:前端秋招简历指导,简历通过率接近于0

注&#xff1a;为保证用户信息安全&#xff0c;姓名和学校等信息已经进行同层次变更&#xff0c;内容部分细节也进行了部分隐藏 简历说明 这是一份二本前端同学的校招简历。25届的二本同学求职方向主要是在小公司&#xff0c;但是这个同学他故意把学校放在简历最后&#xff0…

R包:DiagrammeR流程图

介绍 DiagrammeR 依赖于图形描述语言 Graphviz&#xff0c;可以通过 R 包 igraph 和 visNetwork 访问。DiagrammeR 通过将有效的图规范以 DOT 语言的形式传递给 grViz() 函数来输出图。 加载R包 采用DiagrammeRR包&#xff0c;它提供了以下函数&#xff1a; 使用create_grap…

亲子母婴行业媒体邀约宣发资源

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 亲子母婴行业是一个综合性的产业&#xff0c;涉及多个领域&#xff0c;包括儿童食品&#xff0c;儿童玩具&#xff0c;服装&#xff0c;洗护&#xff0c;月子中心&#xff0c;母婴护理&a…

单臂路由组网实验,单臂路由的定义、适用情况、作用

一、定义 单臂路由是指通过在路由器的一个接口上配置许多子接口,从而实现原来相互隔离的不同VLAN之间的互通。 子接口:把路由器上的实际的物理接口划分为多个逻辑上的接口,这些被划分的逻辑接口就是子接口。 二、适用情况 用在没有三层交换机,却要实现不同VLAN之间的互…

怎样恢复删除的视频?简单几步迅速上手!

在短视频时代&#xff0c;视频成为我们生活中不可缺少的一部分。它记录了我们生活中的点点滴滴&#xff0c;承载着许多美好的回忆。如果一不小心删除了重要的视频&#xff0c;那将是一个巨大的缺憾。那我们该怎么恢复删除的视频呢&#xff1f;在电脑删掉的视频还能恢复吗&#…

Java基础笔记(面试题)

一、Tomcat中为什么要使用自定义类加载器 Tomcat中可以放多个Java项目的jar文件&#xff0c;如果每个jar文件中都有一个User的类&#xff0c;那么User类在没有自定义类加载器的情况下是只能加载一次&#xff1b;想要加载多次&#xff0c;只能自定义类加载器 二、JDK、JRE、JVM…

如何实现本地文件存储

文章目录 1. 知识回顾2. 示例代码 我们在上一章回中介绍了"如何实现文件存储"相关的内容&#xff0c;本章回中将继续介绍与此相关的内容.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 知识回顾 我们上一章回中介绍了实现文件存储的三个步骤&#xff0c;不过限…

vue调试工具没有Pinia模块解决办法

修改前&#xff0c;调试工具里面没有Pinia模块 在项目的入口文件mian.js中这样修改 import /assets/main.scss import pinia from /stores/index import { createApp } from vue import App from ./App.vue import router from ./router import elFormRenderer from el-form…

详解 BGE-M3 与 Splade 模型

详解 BGE-M3 与 Splade 模型 本文将探索两种先进的 Embedding 模型——BGE-M3 和 Splade&#xff0c;深入解析它们的设计理念和工作原理。 01. 快速回顾Embedding向量的概念 Embedding 向量或者向量表示&#xff0c;是指在高维向量空间中以数值描述表示对象、概念或实体&am…

使用Python和wxPython创建动态HTML日历生成器

在这个数字化时代,日历仍然是我们日常生活中不可或缺的工具。今天,我们将探讨如何使用Python创建一个动态HTML日历生成器。这个项目不仅实用,还能帮助我们深入理解Python编程、GUI开发和网页生成的相关知识。 项目概述 我们的目标是创建一个应用程序,允许用户选择特定的年份和…

第二证券:电影暑期档持续升温 农机自动驾驶驶入快车道

农机自动驾驶打开驶入快车道 得益于农机补贴、土地流通、高标准农田制造等方针引导&#xff0c;叠加技术突围和用户降本增效的内生需求&#xff0c;我国正处于农业2.0向农业3.0的过渡阶段。其间农机自动驾驶系统是结束农业3.0&#xff08;即自动化&#xff09;的要害并迎来快速…

【中项第三版】系统集成项目管理工程师 | 第 5 章 软件工程② | 5.4 - 5.8

前言 第 5 章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于技术的内容&#xff0c;学习要以教材为准。 目录 5.4 软件实现 5.4.1 软件配置管理 5.4.2 软件编码 5.4.3 软件测试 5.5 部署交付 5.5.1 软件部署 5.5.2 软件交付 5.5.3 持续交付 5.5.4…

我日常是如何使用LLM工具的:你的LLM工具没用起来,可能是因为方法不对。

引言 我对 Prompt 认知经历了 2 个阶段&#xff1a; 第一阶段&#xff1a;去年 3 月-11 月&#xff0c;我认为 Prompt 最终会灭亡。 第二阶段&#xff1a;去年 12 月至今&#xff0c;我有两个理解&#xff1a; 在主流 LLM 工具(比如 ChatGPT&#xff0c;文心一言等大模型厂商…

dom4j 操作 xml 之按照顺序插入标签

最近学了一下 dom4j 操作 xml 文件&#xff0c;特此记录一下。 public class Dom4jNullTagFiller {public static void main(String[] args) throws DocumentException {SAXReader reader new SAXReader();//加载 xml 文件Document document reader.read("C:\\Users\\24…

leetcode刷题总结——字符串匹配

KMP&#xff08;字符串匹配算法&#xff09; 主串或目标串&#xff1a;比较长的&#xff0c;我们就是在它里面寻找子串是否存在&#xff1b; 子串或模式串&#xff1a;比较短的。 前缀&#xff1a;字符串A和B&#xff0c;A BS&#xff0c;S非空&#xff0c;则B为A的前缀。 …

C++从入门到精通(第2版) 中文电子版

前言 C&#xff08;c plus plus&#xff09;是一种计算机高级程序设计语言&#xff0c;由C语言扩展升级而产生&#xff0c;最早于1979年由本贾尼斯特劳斯特卢普在AT&T贝尔工作室研发。C既可以进行C语言的过程化程序设计&#xff0c;又可以进行以抽象数据类型为特点的基于对…

四、GD32 MCU 常见外设介绍

系统架构 1.RCU 时钟介绍 众所周知&#xff0c;时钟是MCU能正常运行的基本条件&#xff0c;就好比心跳或脉搏&#xff0c;为所有的工作单元提供时间 基数。时钟控制单元提供了一系列频率的时钟功能&#xff0c;包括多个内部RC振荡器时钟(IRC)、一个外部 高速晶体振荡器时钟(H…

Python os模块的强大功能与应用详解

概要 在Python中,os模块提供了与操作系统进行交互的功能,允许我们执行各种操作系统任务,如文件和目录操作、环境变量访问、进程管理等。os模块是标准库的一部分,无需额外安装。本文将详细介绍os模块的功能,并提供相应的示例代码,帮助全面掌握这一强大工具。 os 模块概述…

支付宝低代码搭建电商小程序,无需编程,可视化操作

大家好&#xff0c;我是小悟 在数字化浪潮的推动下&#xff0c;为了更快速、高效地搭建电商小程序&#xff0c;支付宝低代码平台凭借其独特优势&#xff0c;为商家提供了便捷的解决方案。 支付宝低代码平台犹如一座精心打造的智慧工坊&#xff0c;让电商小程序的搭建变得轻而易…

【 香橙派 AIpro评测】烧系统运行部署LLMS大模型跑开源yolov5物体检测并体验Jupyter Lab AI 应用样例(新手入门)

文章目录 一、引言⭐1.1下载镜像烧系统⭐1.2开发板初始化系统配置远程登陆&#x1f496; 远程ssh&#x1f496;查看ubuntu桌面&#x1f496; 远程向日葵 二、部署LLMS大模型&yolov5物体检测⭐2.1 快速启动LLMS大模型&#x1f496;拉取代码&#x1f496;下载mode数据&#x…