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

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

话不多说，直接上图片，这个就是一个小例子
在这里插入图片描述子组件，直接上代码，子组件的线条颜色，可以自己设置变量从父组件传入，我这里没写。
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;每个查找只要…
阅读更多...
【已验证】debian12 更换国内源

【已验证】debian12 更换国内源

1. 编辑 /etc/apt/sources.list 文件 sudo nano /etc/apt/sources.list2. 清空 sources.list 文件里的内容&#xff0c;讲下面内容拷贝到 sources.list deb http://mirrors.163.com/debian/ bookworm main contrib non-free non-free-firmware deb http://mirrors.163.com/de…
阅读更多...
Nginx 代理与 Proxy 插件整合的最佳实践

Nginx 代理与 Proxy 插件整合的最佳实践

推荐一个AI网站&#xff0c;免费使用豆包AI模型&#xff0c;快去白嫖&#x1f449;海鲸AI 写在前面 本文将介绍 Nginx 的正向代理配置以及如何与 Proxy 插件进行整合。正向代理是一种代理服务器&#xff0c;它代表客户端向目标服务器发送请求&#xff0c;并将响应返回给客户端…
阅读更多...
【Linux】- HBase集群部署 [19]

【Linux】- HBase集群部署 [19]

简介 apache HBase是一种分布式、可扩展、支持海量数据存储的 NoSQL 数据库。 和Redis一样&#xff0c;HBase是一款KeyValue型存储的数据库。 不过和Redis涉及方向不同 Redis设计为少量数据&#xff0c;超快检索HBase设计为海量数据&#xff0c;快速检索 HBase在大数据邻域…
阅读更多...
【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;也就是说&…
阅读更多...
JS之Reduce

JS之Reduce

reduce 是 JavaScript 中 Array 对象的一个方法&#xff0c;用于对数组中的每个元素执行一个提供的函数&#xff08;称为 reducer 函数&#xff09;&#xff0c;并将其结果汇总为单个返回值。它是一种高阶函数&#xff0c;可以用于数组的累积操作&#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格式图片 音视频…
阅读更多...
创建一个vue3项目

创建一个vue3项目

## 1.创建命令 npm create vuelatest ## 2.具体配置 ## 配置项目名称 √ Project name: vue3_test ## 是否添加TypeScript支持 √ Add TypeScript? Yes ## 是否添加JSX支持 √ Add JSX Support? No ## 是否添加路由环境 √ Add Vue Router for Single Page Application de…
阅读更多...
人工智能+量子计算：飞跃现实边界还是科技幻想？

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

人工智能量子计算&#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…
阅读更多...
前端基础入门三大核心之HTML篇：探索WebAssembly —— 开启网页高性能应用新时代

前端基础入门三大核心之HTML篇：探索WebAssembly —— 开启网页高性能应用新时代

前端基础入门三大核心之HTML篇&#xff1a;探索WebAssembly —— 开启网页高性能应用新时代 WebAssembly基础概念工作原理概览WebAssembly实战示例基本使用 安全性与性能优化防范漏洞实践实际工作中的使用技巧结语与讨论 随着Web技术的飞速发展&#xff0c;前端开发者面临越来越…
阅读更多...
全文检索ElasticSearch简介

全文检索ElasticSearch简介

1 全文检索 1.1 什么是全文检索 全文检索是一种通过对文本内容进行全面索引和搜索的技术。它可以快速地在大量文本数据中查找包含特定关键词或短语的文档，并返回相关的搜索结果。全文检索广泛应用于各种信息管理系统和应用中，如搜索引擎、文档管理系统、电子邮件客户端、新闻…
阅读更多...
Mac虚拟机工具 CrossOver 24.0.0 Beta3 Mac中文版

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

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

【FAQ】HarmonyOS SDK 闭源开放能力 —IAP Kit（2）

1.问题描述&#xff1a; 应用内支付IAP Kit和Payment Kit的区别以及适用场景&#xff1f; 解决方案&#xff1a; IAP Kit是四方支付&#xff0c;仅支持在线虚拟商品&#xff0c;如会员&#xff0c;游戏钻石等&#xff0c;双框架支持全球&#xff0c;目前单框架暂时只支持国内…
阅读更多...
Qml：线程

Qml：线程

import QtQuick import QtQuick.Controls Window {width: 640height: 480visible: truetitle: qsTr("Test Thread")//定时器测试//显示时钟Text {id: xtimex:parent.width-220y:parent.height-30text:"time"MouseArea{anchors.fill:parentonClicked:{timer…
阅读更多...
最新文章

Copyright @ 2022~2023