当前位置: 首页 > news >正文

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

实现效果&#xff1a; 代码&#xff1a; <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个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…...

python selenium(4+)+chromedriver最新版 定位爬取嵌套shadow-root(open)中内容

废话不多说&#xff0c;直接开始 本文以无界作为本文测试案例&#xff0c;抓取shadow-root&#xff08;open&#xff09;下的内容 shadow Dom in selenium&#xff1a; 首先先讲一下shadow Dom in selenium 版本的区别&#xff0c;链接指向这里 在Selenium 4版本 以及 chrom…...

React基础教程(11):useCallback记忆函数的使用

11、useCallback记忆函数 防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了,才重新声明一次。 示例代码: import {useCallback, useState} from "react";const App = () =>...

arp-scan 移植到嵌入式 Linux 系统是一个涉及多个步骤的过程

将 arp-scan 移植到嵌入式 Linux 系统是一个涉及多个步骤的过程。arp-scan 是一个用于发送 ARP 请求以发现网络上设备的工具&#xff0c;它依赖于一些标准的 Linux 库和工具。以下是将 arp-scan 移植到嵌入式 Linux 系统的基本步骤&#xff1a; 1. 获取 arp-scan 源码 首先&a…...

【Linux】常用命令一

声明&#xff1a;以下内容均学习自《Linux就该这么学》一书。 Linux中的shell是一种命令行工具&#xff0c;它充当的作用是人与内核(硬件)之间的翻译官。 大多数Linux系统默认使用的终端是Bash解释器。 1、echo 用于在终端输出字符串或变量提取后的值。 echo "字符串…...

在鲲鹏麒麟服务器上部署MySQL主从集群

因项目需求需要部署主从MySQL集群&#xff0c;继续采用上次的部署的MySQL镜像arm64v8/mysql:latest&#xff0c;版本信息为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算法是一个快速求解离散优化问题的经典算法&#xff0c;特别适用于计算离散分布之间的**最优传输&#xff08;Optimal Transport&#xff09;**距离&#xff1b; 最优传输问题介绍 计算两个概率分布 P 和 Q 之间的传输成本&#xff0c;通常表示为&#xff1a; 是传输…...

群控系统服务端开发模式-应用开发-邮箱短信通道功能开发

邮箱短信通道主要是将邮箱及短信做归属的。具体见下图&#xff1a; 一、创建表 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月没写东西&#xff0c;12月初赶紧水一篇。 刚开始搭建docker服务器时&#xff0c;网上找一堆指令配置好git后&#xff0c;再次新建容器后忘记怎么配了&#xff0c;&#xff0c;这次记录下。 一、git ssh指令法&#xff0c;该方法不用每次提交时输入密码 前期准备&#xff0…...

书生浦语·第四期作业合集

目录 1. Linux基础知识 1.1-Linux基础知识 1.在终端通过ssh 端口映射连接开发机 2. 创建helloworld.py 3.安装相关包并运行 4.端口映射并访问相关网页...

5G学习笔记之PRACH

即使是阴天&#xff0c;也要记得出门晒太阳哦 目录 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虚拟环境的默认安装路径 鉴于不久前由于磁盘空间不足引发的重装系统的惨痛经历&#xff0c;在新系统装好后当然要先更改虚拟环境的默认安装路径。 输入指令&#xff1a; conda info可能因为我原本就没有把 Anacod…...

抓包之查看websocket内容

写在前面 本文看下websocket抓包相关内容。 1&#xff1a;正文 websocket基础环境搭建参考这篇文章。 启动后&#xff0c;先看chrome的network抓包&#xff0c;这里我们直接使用is:running来过滤出websocket的请求&#xff1a; 可以清晰的看到发送的内容以及响应的内容。在…...

【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 等系统采用线性增长的日志模型&#xff0c;通过一个 Leader 和多个 Follower 进行状态同步。这种方式有单点的带宽瓶颈问题。 1.2 区块链共享账本模型 共享账本&#xff1a;树形增长。在去中心化网络中&#xff0c;…...

openwrt利用nftables在校园网环境下开启nat6 (ipv6 nat)

年初写过一篇openwrt在校园网环境下开启ipv6 nat的文章&#xff0c;利用ip6tables控制ipv6的流量。然而从OpenWrt22版本开始&#xff0c;系统内置的防火墙变为nftables&#xff0c;因此配置方法有所改变。本文主要参考了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上的一些问题

经常看到有的同学说网上的教程都是假的&#xff0c;巴拉巴拉&#xff0c;看看人家发布时间&#xff0c;Qt官方的API都会有所变动&#xff0c;多搜索&#xff0c;多总结&#xff0c;再修改记录。 下次遇到问题多这样搜索 QT 4/5/6 xxx document&#xff0c;对比一下就知道…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...