关于在vue3中vue3-tree-org的简单应用

server/2025/1/22 21:17:48/

效果图如下:

主要围绕:属性的使用方式、样式等问题来展示。

文档在这里:vue3-tree-org

<vue3-tree-org :data="treeData" center :horizontal="false" :toolBar="toolBar" @on-node-click="handleTreeNodeClick"><!-- 自定义节点内容 --><template v-slot="{ node }"><div v-if="node.$$data.id !== 1" :class="[chooseItem == node.$$data.id ? 'tree-org-node__text_choosed' : 'tree-org-node__text']"><img :src="[chooseItem == node.$$data.id ? node.$$data.iconChoosed : node.$$data.icon]" alt="" /><div style="margin-left: .5vw"><div style="font-size: .8vw">{{ node.label }}</div><div style="text-align: left;"><span style="font-weight: 600;font-size: 1vw">{{ node.$$data.pCount }}</span><span>人</span></div></div></div><div v-else class="tree-org-node__head"><img :src="node.$$data.icon" alt="" /><div style="margin-left: .5vw;font-size: .8vw">{{ node.label }}</div></div></template></vue3-tree-org>

我此处写的代码比较随意。样式都是一样编写,只不过是在使用属性时,要使用node.$$data.xxx的方式来使用。


http://www.ppmy.cn/server/160565.html

相关文章

vscode导入模块不显示类型注解

目录结构&#xff1a; utils.py&#xff1a; import random def select_Jrandom(i:int, m:int) -> int:"""随机选择一个不等于 i 的整数"""j iwhile j i:j int(random.uniform(0, m))return jdef clip_alpha(alpha_j:float, H:float, L:f…

Visual Studio环境搭建Qgis二次开发环境

QGIS&#xff08;Quantum GIS&#xff09;是一款开源的地理信息系统软件&#xff0c;支持二次开发以满足特定的地理信息处理需求。二次开发通常涉及到使用QGIS提供的API和SDK来创建自定义插件或独立应用程序。以下是关于如何搭建QGIS二次开发环境的一些关键步骤和注意事项。 1…

Python 一步一步教你用pyglet制作汉诺塔游戏(续)

目录 汉诺塔游戏 7. 汉诺塔类 8. 移动圆盘 9. 移动演示 10. 递归问题 11. 任意展示 12. 鼠标操作 汉诺塔游戏 汉诺塔(Tower of Hanoi),是一个源于印度古老传说的益智玩具。这个传说讲述了大梵天创造世界的时候,他做了三根金刚石柱子,并在其中一根柱子上从下往上按…

基于SpringBoot+Vue旅游管理系统的设计和实现(源码+文档+部署讲解)

个人名片 &#x1f525; 源码获取 | 毕设定制| 商务合作&#xff1a;《个人名片》 ⛺️心若有所向往,何惧道阻且长 文章目录 个人名片环境需要技术栈功能介绍功能说明 环境需要 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 数据库&…

Python----Python高级(正则表达式:语法规则,re库)

一、正则表达式 1.1、概念 正则表达式&#xff0c;又称规则表达式,&#xff08;Regular Expression&#xff0c;在代码中常简写为regex、 regexp或RE&#xff09;&#xff0c;是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff0…

redis 分布式方案

文章目录 前言一、主从复制1、主从配置2、建立连接3、数据同步3.1、全量同步3.2、全量同步配置3.3、 增量同步3.4、 增量同步配置 二、redis sentinel1、主要功能2、sentinel配置3、高可用3.1、故障发现3.2、故障转移3.2.1、选举sentinel进行故障转移3.2.2、选举从节点升级成主…

navicat无法连接虚拟机的docker中的mysql

我的数据库安装在了虚拟机的docker中&#xff0c;启动MySQL后&#xff0c;在主机上使用navicat一直连接不上。 首先确认密码是否有问题&#xff1a; docker exec -it mysql8 bash #进入mysql容器 mysql -u root -p #登录MySQL&#xff0c;我这边密码是123456 密码没问题的话…

ovs实现lb负载均衡

负载均衡定义 负载均衡器的实现原理是通过硬件或软件设备将客户端访问流量根据转发策略分发到多个服务器或设备上&#xff0c;以确保系统的负载均衡。常见的实现方式包括&#xff1a; 二层负载均衡‌&#xff1a;使用虚拟MAC地址方式&#xff0c;根据OSI模型的二层进行负载均…