vue3 + ts 使用 el-tree
实现效果:

代码:
<template><!-- el-tree 使用 --><div class="my-tree-container"><el-scrollbar height="100%"><el-tree ref="treeRef" :data="treeData" node-key="id" @node-click="handleNodeClick" :props="treeProps":show-checkbox="true" :check-strictly="true" :default-expanded-keys="defaultExpandedKeys"@check-change="handleCheckChange"><template #default="{ node, data }"><span class="node-icon"><i class="iconfont" :class="data.icon"/></span><span :class="currentNodeKey === data.id ? 'active-node' : ''">{{ node.label }}</span></template></el-tree></el-scrollbar></div></template><script setup lang="ts">import {ref} from "vue";const treeProps = {id: 'id',label: 'label',children: 'children',disabled: 'disabled'
}const treeData: any[] = [{id: 1,label: 'Level one 1',icon: 'icon-houqinguanli',children: [{id: 11,label: 'Level two 1-1',children: [{id: 111,label: 'Level three 1-1-1',},],},],},{id: 2,label: 'Level one 2',icon: 'icon-caiwuguanli',children: [{id: 21,label: 'Level two 2-1',children: [{id: 211,label: 'Level three 2-1-1',},],},{id: 22,label: 'Level two 2-2',children: [{id: 221,label: 'Level three 2-2-1',},],},],},{id: 3,label: 'Level one 3',icon: 'icon-nenghaoqingkuang',children: [{id: 31,label: 'Level two 3-1',children: [{id: 311,label: 'Level three 3-1-1',},],},{id: 32,label: 'Level two 3-2',children: [{id: 321,label: 'Level three 3-2-1',},],},],},
] // 数据const currentNodeKey = ref<any>(null) // 当前点击的节点的 key【key具体为哪一个属性可通过 node-key 指定】const defaultExpandedKeys = [1, 2, 3] // 默认展开的节点的 keyconst treeRef = ref<any>(null)const handleNodeClick = (data: any, node: any) => { /* 节点点击事件 */currentNodeKey.value = data.id
}/* 节点勾选事件(当复选框被点击时触发)
* data: 当前点击的节点的数据
* isNodeChecked: 节点本身是否被选中
* hasChildrenChecked: 节点的子树中是否有被选中的节点
* */
const handleCheckChange = (data: any, node: any, indeterminate: any) => {// console.log(data, node, indeterminate)const checkedNodes = treeRef.value.getCheckedNodes()console.log(checkedNodes, '被选中的节点')
}// 根据唯一 id 查找树节点
const findNodeById = (id: number, arr: any[]): any => {for (let item of arr) {if (item.id === id) {return item}if (item.children && item.children.length > 0) {const res = findNodeById(id, item.children)if (res) {return res}}}
}</script><style scoped lang="scss">.my-tree-container {position: absolute;top: 100px;left: 100px;height: 300px; /* tree height needed */width: 230px; /* needed */background: linear-gradient(180deg, rgba(26, 35, 48, 0.9) 0%, rgba(6, 13, 22, 0.9) 100%);opacity: 0.9;padding-bottom: 10px;.active-node { /* 选中的节点的样式 */color: #409EFF;background-color: transparent;}.node-icon {margin-right: 10px;}:deep(.el-tree) {background: none;color: rgba(206, 207, 209);font-size: 16px;margin-left: 10px;font-weight: lighter;font-family: "ResourceHanRoundedCN-Bold", "黑体", Arial, sans-serif;}:deep(.el-tree-node__content) { // node-heightheight: 35px;}:deep(.el-tree-node__expand-icon) { /* 隐藏可展开节点前面的箭头 */display: none;}:deep(.el-tree-node__content:hover) {background-color: transparent;color: #409EFF;}:deep(.el-tree-node:focus > .el-tree-node__content) { /* 解决点击一个节点后,鼠标移开,修改该节点背景色失效的问题 */background: none;}:deep(.el-icon) {font-size: 16px;}:deep(.el-tree-node) { /* 只有叶子节点显示勾选框 */.is-leaf + .el-checkbox {display: inline-flex;}.el-checkbox {display: none;}}}</style>
相关文章:
vue3 + ts 使用 el-tree
实现效果: 代码: <template><!-- el-tree 使用 --><div class"my-tree-container"><el-scrollbar height"100%"><el-tree ref"treeRef" :data"treeData" node-key"id" n…...
Create Stunning Word Clouds with Ease!
Looking to craft breathtaking word clouds? WordCloudStudio is your go-to solution! Whether you’re a marketer, educator, designer, or simply someone who loves visualizing data, this app has everything you need. Download now: https://apps.apple.com/app/wor…...
html+css网页设计 旅游 马林旅行社5个页面
htmlcss网页设计 旅游 马林旅行社5个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&#…...
python selenium(4+)+chromedriver最新版 定位爬取嵌套shadow-root(open)中内容
废话不多说,直接开始 本文以无界作为本文测试案例,抓取shadow-root(open)下的内容 shadow Dom in selenium: 首先先讲一下shadow Dom in selenium 版本的区别,链接指向这里 在Selenium 4版本 以及 chrom…...
React基础教程(11):useCallback记忆函数的使用
11、useCallback记忆函数 防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了,才重新声明一次。 示例代码: import {useCallback, useState} from "react";const App = () =>...
arp-scan 移植到嵌入式 Linux 系统是一个涉及多个步骤的过程
将 arp-scan 移植到嵌入式 Linux 系统是一个涉及多个步骤的过程。arp-scan 是一个用于发送 ARP 请求以发现网络上设备的工具,它依赖于一些标准的 Linux 库和工具。以下是将 arp-scan 移植到嵌入式 Linux 系统的基本步骤: 1. 获取 arp-scan 源码 首先&a…...
【Linux】常用命令一
声明:以下内容均学习自《Linux就该这么学》一书。 Linux中的shell是一种命令行工具,它充当的作用是人与内核(硬件)之间的翻译官。 大多数Linux系统默认使用的终端是Bash解释器。 1、echo 用于在终端输出字符串或变量提取后的值。 echo "字符串…...
在鲲鹏麒麟服务器上部署MySQL主从集群
因项目需求需要部署主从MySQL集群,继续采用上次的部署的MySQL镜像arm64v8/mysql:latest,版本信息为v8.1.0。计划部署服务器192.168.31.100和192.168.31.101 部署MySQL主节点 在192.168.31.100上先创建好/data/docker/mysql/data和/data/docker/mysql/l…...
Siknhorn算法介绍
SiknHorn算法是一个快速求解离散优化问题的经典算法,特别适用于计算离散分布之间的**最优传输(Optimal Transport)**距离; 最优传输问题介绍 计算两个概率分布 P 和 Q 之间的传输成本,通常表示为: 是传输…...
群控系统服务端开发模式-应用开发-邮箱短信通道功能开发
邮箱短信通道主要是将邮箱及短信做归属的。具体见下图: 一、创建表 1、语句 CREATE TABLE cluster_control.nc_param_emailsms (id int(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 编号,email_id varchar(120) CHARACTER SET utf8 COLLATE utf8_general_ci NO…...
[docker中首次配置git环境]
11月没写东西,12月初赶紧水一篇。 刚开始搭建docker服务器时,网上找一堆指令配置好git后,再次新建容器后忘记怎么配了,,这次记录下。 一、git ssh指令法,该方法不用每次提交时输入密码 前期准备࿰…...
书生浦语·第四期作业合集
目录 1. Linux基础知识 1.1-Linux基础知识 1.在终端通过ssh 端口映射连接开发机 2. 创建helloworld.py 3.安装相关包并运行 4.端口映射并访问相关网页...
5G学习笔记之PRACH
即使是阴天,也要记得出门晒太阳哦 目录 1. 概述 2. PRACH Preamble 3. PRACH Preamble 类型 3.1 长前导码 3.2 短前导码 3.3 前导码格式与小区覆盖 4. PRACH时频资源 4.1 小区所有可用PRACH资源 4.2 SSB和RACH的关系 4.3 PRACH时频资源配置 1. 概述 随机接入…...
Ubuntu24.04配置DINO-Tracker
一、引言 记录 Ubuntu 配置的第一个代码过程 二、更改conda虚拟环境的默认安装路径 鉴于不久前由于磁盘空间不足引发的重装系统的惨痛经历,在新系统装好后当然要先更改虚拟环境的默认安装路径。 输入指令: conda info可能因为我原本就没有把 Anacod…...
抓包之查看websocket内容
写在前面 本文看下websocket抓包相关内容。 1:正文 websocket基础环境搭建参考这篇文章。 启动后,先看chrome的network抓包,这里我们直接使用is:running来过滤出websocket的请求: 可以清晰的看到发送的内容以及响应的内容。在…...
【Leetcode Top 100】21. 合并两个有序链表
问题背景 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 数据约束 两个链表的节点数目范围是 [ 0 , 50 ] [0, 50] [0,50] − 100 ≤ N o d e . v a l ≤ 100 -100 \le Node.val \le 100 −100≤Node.val≤100 l 1 l_1 …...
账本模型
05-账本模型 1 账本模型 1.1 传统线性增长模型 传统的 MySQL 等系统采用线性增长的日志模型,通过一个 Leader 和多个 Follower 进行状态同步。这种方式有单点的带宽瓶颈问题。 1.2 区块链共享账本模型 共享账本:树形增长。在去中心化网络中,…...
openwrt利用nftables在校园网环境下开启nat6 (ipv6 nat)
年初写过一篇openwrt在校园网环境下开启ipv6 nat的文章,利用ip6tables控制ipv6的流量。然而从OpenWrt22版本开始,系统内置的防火墙变为nftables,因此配置方法有所改变。本文主要参考了OpenWRT使用nftables实现IPv6 NAT 这篇文章。 友情提示 …...
24.12.02 Element
import { createApp } from vue // 引入elementPlus js库 css库 import ElementPlus from element-plus import element-plus/dist/index.css //中文语言包 import zhCn from element-plus/es/locale/lang/zh-cn //图标库 import * as ElementPlusIconsVue from element-plus/i…...
记录QT5迁移到QT6.8上的一些问题
经常看到有的同学说网上的教程都是假的,巴拉巴拉,看看人家发布时间,Qt官方的API都会有所变动,多搜索,多总结,再修改记录。 下次遇到问题多这样搜索 QT 4/5/6 xxx document,对比一下就知道…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
