自定义横向思维导图，横向组织架构图，横向树图。可以自定义节点颜色，样式，还可以导出为图片

最近公司设计要求根据目录结构，横向展示。所以做了一个横向的思维导图，横向的树结构，横向的组织架构图，可以自定义节点颜色，样式，还可以导出为图片

话不多说，直接上图片，这个就是一个小例子
在这里插入图片描述子组件，直接上代码，子组件的线条颜色，可以自己设置变量从父组件传入，我这里没写。
isUnfold 表示是否有下级

<template><div class="my-self-tree" ref="my-tree"><div class="info-card"><div class="card-item" v-for="(item, index) in data" :key="index"><divclass="vertical-line":style="computedHeight(item.height, data.length, index)"v-if="item.level !== 0"></div><div class="horizontal-line" v-if="item.level !== 0"></div><div class="tree-node" :class="{'tree-node-1': item.level == 0&&item.isUnfold != 0}"><divclass="tree-node-content":class="[handlItem(item)]"@click="clickTreeNode(item)">{{ item.name }}</div></div><divclass="horizontal-line"v-if="item.childNode && item.childNode.length !== 0"></div><mytree@nodeClick="clickTreeNode":data="item.childNode"v-if="item.childNode && item.childNode.length !== 0"></mytree></div></div></div>
</template><script>
export default {name: "mytree",props: {data: Array,},data() {return {};},methods: {computedHeight(pheight, length, index) {if (length == 1 || length == 0) {return {height: "0px",display: "none",};} else {let height = 0;let marginTop = 0;let marginB = 0;if (index == 0) {height = pheight / 2;marginTop = height;return {height: height + "px","margin-top": marginTop + "px",};}if (index == length - 1) {height = pheight / 2;marginB = height;return {height: height + "px","margin-bottom": marginB + "px",};} else {height = pheight;return {height: height + "px",};}}},clickTreeNode(item) {this.$emit("nodeClick", item);},handlItem(item) {if (item.level == 0) {return 'has-background'}else {if (item.isUnfold == 1) {//中间节点let flag = this.hasZeroCountNode(item.childNode);console.log(flag, 'flag')if (item.level == 1) {return flag ? 'font-color-black border-black' : 'font-color-green border-green';} else {return flag ? 'font-color-black' : 'font-color-green';}} else if (item.isUnfold == 0) {//最后一个节点if (item.level == 1) {return item.count == 0 ? 'font-color-red border-red' : 'font-color-green border-green'} else {return item.count == 0 ? 'font-color-red' : 'font-color-green'}}}},hasZeroCountNode(nodes) {//不含当前节点的count判断，判断所有子节点for (let node of nodes) {if (node.count === 0) {return true;}if (node.childNode && this.hasZeroCountNode(node.childNode)) {return true;}}return false;//含当前节点的count判断// if (node.count === 0) {//   return true; // 如果找到节点的count为0，立即返回true// }// if (node.childNode && node.childNode.length > 0) {//   // 如果节点有子节点，则递归检查子节点//   return node.childNode.some(child => this.hasZeroCountNode(child));// }// return false; // 如果节点和其子节点都不满足条件，返回false}},components: {},mounted() {},
};
</script><style lang="scss" scoped>
:root .my-self-tree {// height: 100%;// width: 100%;.vertical-line {position: relative;// display: inline-block;width: 0.5px;background: #009694;transform:scale(2, 1);}.card-item {margin:0;padding:0;display: flex;align-items: center;.horizontal-line {min-width: 30px !important;//   display: inline-block;height: 0.5px;background: #009694;transform:scale(1 , 2);position: relative;}.horizontal-line::before {content:'';position:absolute;height: 1px;width:2px;right:-1px;background: #009694;}.horizontal-line::after {content:'';position:absolute;height: 1px;width:2px;left:-1px;background: #009694;}}.tree-node {cursor: pointer;height: 30px;position: relative;&:nth-child(1)::after {display: none;}// &:nth-child(1)::before {//   position: absolute;//   content: "";//   width: 8px;//   display: inline-block;//   height: 8px;//   border-radius: 4px;//   top: 50%;//   right: -4px;//   transform: translateY(-50%);//   background: #009694;// }.tree-node-content {display: flex;position: relative;justify-content: center;align-items: center;width: auto;height: 100%;border: none;border-radius: 4px;color: #000;white-space: nowrap !important;padding: 0 10px;}.has-background {color: white;background: #009694;}.border-green {border: 1px solid #009694;}.border-black {border: 1px solid #000;}.border-red {border: 1px solid #FF6767;}.font-color-green {color: #009694;}.font-color-black {color: #000;}.font-color-red {color: #FF6767;}}.tree-node::after {position: absolute;content: "";width: 8px;display: inline-block;height: 8px;border-radius: 4px;top: 50%;left: -4px;transform: translateY(-50%);background: #009694;}.tree-node-1::before {position: absolute;content: "";width: 8px;display: inline-block;height: 8px;border-radius: 4px;top: 50%;right: -4px;transform: translateY(-50%);background: #009694;}
}
</style>

这里是父组件

<el-popconfirmplacement="top-end"title="是否需要导出为图片？"@confirm="exportFn"><el-buttonslot="reference"style="margin-left: 10px"type="primary"class="fliter-btn icons-btn"size="mini"><i class="qhFileManage icon-daochu" style="font-size: 14px;"></i> 导出</el-button></el-popconfirm>
<tree :data="dataInfo" @nodeClick="nodeClick" id="mytree" style="height: 100%;"></tree>//处理数据
//temporaryData 为实际获取的数据 ，temporaryData1 是做例子写的数据handleData(temporaryData) {//自行调试测试数据，后面换成正式数据let temporaryData1 = [{id: 1,level: 0,name: "部门名称啊",childNode: [{id: 11,level: 1,name: "自己测试数据",isUnfold: 1,childNode: [{id: 1111111,level: 2,name: "所有下级节点count>0",isUnfold: 1,childNode: [{id: 1111111,level: 3,name: "2ge",count: 2,isUnfold: 0,},{id: 1111111,level: 3,name: 1,isUnfold: 1,childNode: [{id: 1111111,level: 4,name: "2",isUnfold: 1,childNode: [{id: 1111111,level: 4,name: "1ge",count: 1,isUnfold: 0,},],},],},{id: 1111111,level: 3,name: "2ge",count: 2,isUnfold: 0,},],},{id: 1111111,level: 2,name: "所有下级节点count=0",isUnfold: 1,childNode: [{id: 1111111,level: 3,name: "0ge",count: 0,isUnfold: 0,},{id: 1111111,level: 3,name: 1,isUnfold: 1,childNode: [{id: 1111111,level: 4,name: "0ge",count: 0,isUnfold: 0,},],},{id: 1111111,level: 3,name: "0ge",count: 0,isUnfold: 0,},],},{id: 1111111,level: 2,name: "所有下级节点存count=0,>0",isUnfold: 1,childNode: [{id: 1111111,level: 3,name: "0ge",count: 0,isUnfold: 0,},{id: 1111111,level: 3,name: 1,isUnfold: 1,childNode: [{id: 1111111,level: 4,name: "1ge",count: 1,isUnfold: 0,},],},{id: 1111111,level: 3,name: "1ge",count: 1,isUnfold: 0,},],},],},],isUnfold: 1,},];let fixedData = temporaryData.map((item) => {return this.traveTree(item);});console.log(fixedData, "fixedData");this.dataInfo = fixedData;},
// traveTree这里是给每个节点设置高度，traveTree(nodeInfo) {let childrenInfo = nodeInfo.childNode;if (!childrenInfo || childrenInfo.length == 0) {nodeInfo.height = 40;} else {childrenInfo.map((item) => {this.traveTree(item);});nodeInfo.height = childrenInfo.reduce((preV, n) => {return preV + n.height;}, 0);}return nodeInfo;},

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

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

相关文章

使用redis优化纯真IP库访问

使用redis优化纯真IP库访问

每次请求都需要加载10m的纯真IP qqwry.dat 文件&#xff0c;自己测试不会发现问题&#xff0c;但如果访问量上去了&#xff0c;会影响每次请求的相应效率&#xff0c;并且会消耗一定的io读写&#xff0c;故打算优化 优化方案 每个IP区间之间不存在交集&#xff0c;每个查找只要…
阅读更多...
【python】python省市水资源数据分析可视化（源码+数据）【独一无二】

【python】python省市水资源数据分析可视化（源码+数据）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
2024年失业率狂飙18.1%，史上最难就业季即将来临，该如何逆袭？_2024年失业潮

2024年失业率狂飙18.1%，史上最难就业季即将来临，该如何逆袭？_2024年失业潮

【2024年被称为最难就业年&#xff0c;1158万大学生面临难题】 距离2024年毕业季还剩不到4个月&#xff0c;毕业学员将面临空前严峻的就业压力&#xff01;具国家统 计局的数据显示&#xff0c;1-2月份&#xff0c;16至24岁年轻人的失业率飙到18.1%&#xff0c;也就是说&…
阅读更多...
微服务：利用RestTemplate实现远程调用

微服务：利用RestTemplate实现远程调用

打算系统学习一下微服务知识&#xff0c;从今天开始记录。 远程调用 调用order接口&#xff0c;查询。 由于实现还未封装用户信息&#xff0c;所以为null。 下面我们来使用远程调用用户服务的接口&#xff0c;然后封装一下用户信息返回即可。 流程图 配置类中注入RestTe…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （265）-- 算法导论20.1 4题

文心一言 VS 讯飞星火 VS chatgpt （265）-- 算法导论20.1 4题

四、假设不使用一棵叠加的度为 u \sqrt{u} u ​ 的树&#xff0c;而是使用一棵叠加的度为 u 1 k u^{\frac{1}{k}} uk1​的树&#xff0c;这里 k 是大于 1 的常数&#xff0c;则这样的一棵树的高度是多少&#xff1f;又每个操作将需要多长时间&#xff1f;如果要写代码&#xf…
阅读更多...
模板中的右值引用（万能引用）、引用折叠与完美转发

模板中的右值引用（万能引用）、引用折叠与完美转发

模板中的右值引用&#xff08;万能引用&#xff09;、引用折叠与完美转发 文章目录 模板中的右值引用&#xff08;万能引用&#xff09;、引用折叠与完美转发一、万能引用与引用折叠1. 模板中的右值引用2. 自动类型推导(auto)与万能引用3. 引用折叠与万能引用4. lambda表达式捕…
阅读更多...
数据可视化第十天（爬虫爬取某瓣星际穿越电影评论，并且用词云图找出关键词）

数据可视化第十天（爬虫爬取某瓣星际穿越电影评论，并且用词云图找出关键词）

开头提醒 本次爬取的是用户评论&#xff0c;只供学习使用&#xff0c;不会进行数据的传播。希望大家合法利用爬虫。 获得数据 #总程序 import requests from fake_useragent import UserAgent import timefuUserAgent()headers{User-Agent:fu.random }page_listrange(0,10) …
阅读更多...
音视频入门基础：像素格式专题（3）——FFmpeg源码解析BMP格式图片的底层实现原理

音视频入门基础：像素格式专题（3）——FFmpeg源码解析BMP格式图片的底层实现原理

音视频入门基础&#xff1a;像素格式专题系列文章&#xff1a; 音视频入门基础&#xff1a;像素格式专题&#xff08;1&#xff09;——RGB简介 音视频入门基础&#xff1a;像素格式专题&#xff08;2&#xff09;——不通过第三方库将RGB24格式视频转换为BMP格式图片 音视频…
阅读更多...
人工智能+量子计算：飞跃现实边界还是科技幻想？

人工智能+量子计算：飞跃现实边界还是科技幻想？

人工智能量子计算&#xff0c;这是一种可能改变世界的伙伴关系。 在科技的前沿&#xff0c;两大革命性技术——人工智能&#xff08;AI&#xff09;和量子计算——正站在合作的十字路口。人工智能&#xff0c;以其强大的数据分析能力和模式识别&#xff0c;正在改变着我们生活…
阅读更多...
传感器通过Profinet转Modbus网关与PLC通讯在生产线的应用

传感器通过Profinet转Modbus网关与PLC通讯在生产线的应用

Profinet转Modbus&#xff08;XD-MDPN100/300&#xff09;网关可视作一座桥梁&#xff0c;能够实现Profinet协议与Modbus协议相互转换&#xff0c;支持Modbus RTU主站/从站&#xff0c;并且Profinet转Modbus网关设备自带网口和串口&#xff0c;既可以实现协议的转换&#xff0c…
阅读更多...
Mac虚拟机工具 CrossOver 24.0.0 Beta3 Mac中文版

Mac虚拟机工具 CrossOver 24.0.0 Beta3 Mac中文版

CrossOver是一款在Mac上运行Windows应用程序的软件&#xff0c;无需安装虚拟机或重启计算机&#xff0c;简化了操作过程&#xff0c;提高了工作效率&#xff0c;为用户带来便捷体验。前往Mac青桔下载&#xff0c;享受前所未有的便利和高效。摘要由作者通过智能技术生成 CrossOv…
阅读更多...
。。。。。

。。。。。

阅读更多...
robosuite导入自定义机器人

robosuite导入自定义机器人

目录 目的&#xff1a;案例一&#xff1a;成果展示具体步骤&#xff1a;URDF文件准备xml文件生成xml修改机器人构建 目的&#xff1a; 实现其他标准/非标准机器人的构建 案例一&#xff1a; 成果展示 添加机器人JAKA ZU 7 这个模型 具体步骤&#xff1a; URDF文件准备 从…
阅读更多...
python-docx 在word中指定位置插入图片或表格

python-docx 在word中指定位置插入图片或表格

docx库add_picture()方法不支持对图片位置的设置 1、新建一个1行3列的表格&#xff0c;在中间的一列中插入图片 from docx import Document from docx.shared import Pt from docx.oxml.shared import OxmlElement from docx.enum.text import WD_ALIGN_PARAGRAPHdef add_cen…
阅读更多...
Nacos 进阶篇---Nacos服务端怎么维护不健康的微服务实例 ？（七）

Nacos 进阶篇---Nacos服务端怎么维护不健康的微服务实例 ？（七）

一、引言 在 Nacos 后台管理服务列表中&#xff0c;我们可以看到微服务列表&#xff0c;其中有一栏叫“健康实例数” &#xff08;如下图&#xff09;&#xff0c;表示对应的客户端实例信息是否可用状态。 那Nacos服务端是怎么感知客户端的状态是否可用呢 &#xff1f; 本章…
阅读更多...
基于树的存储数据结构demo

基于树的存储数据结构demo

一.简介 由于之前博主尝试Java重构redis&#xff0c;在redis中的的字典数据结构底层也是采用数组实现&#xff0c;字典中存在两个hash表&#xff0c;一个是用于存储数据&#xff0c;另一个被用于rehash扩容为前者两倍。但是我注意到了在redis的数据结构中&#xff0c;并没有像…
阅读更多...
【MySQL】库的操作和表的操作

【MySQL】库的操作和表的操作

库的操作和表的操作 一、库的操作1、创建数据库(create)2、字符集和校验规则&#xff08;1&#xff09;查看系统默认字符集以及校验规则&#xff08;2&#xff09;查看数据库支持的字符集&#xff08;3&#xff09;查看数据库支持的字符集校验规则&#xff08;4&#xff09;校验…
阅读更多...
存储+调优：存储-IP-SAN

存储+调优：存储-IP-SAN

存储调优&#xff1a;存储-IP-SAN 数据一致性问题 硬盘&#xff08;本地&#xff0c;远程同步rsync&#xff09; 存储设备&#xff08;网络&#xff09; 网络存储 不同接口的磁盘 1.速率 2.支持连接更多设备 3.支持热拔插 存储设备什么互联 千…
阅读更多...
ARTS Week 29

ARTS Week 29

Algorithm 本周的算法题为 2413. 最小偶倍数 给你一个正整数 n &#xff0c;返回 2 和 n 的最小公倍数&#xff08;正整数&#xff09;。 示例 1&#xff1a;输入&#xff1a;n 5输出&#xff1a;10解释&#xff1a;5 和 2 的最小公倍数是 10 。 实现代码如下&#xff1a; con…
阅读更多...
由于找不到mfc140u.dll，无法继续执行代码如何解决

由于找不到mfc140u.dll，无法继续执行代码如何解决

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是电脑找不到mfc140u.dll文件。这个问题可能会导致程序无法正常运行或系统崩溃。为了解决这个问题&#xff0c;本文将介绍5种修复方法&#xff0c;帮助大家快速恢复电脑的正常运行。 一&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023