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

Vue3 Element-Plus el-tree 右键菜单组件

news 来源：原创 2025/6/10 6:51:28

参考代码：实现Vue3+Element-Plus(tree、table)右键菜单组件

这篇文章的代码确实能用，但是存在错误，修正后的代码：

<template><div style="text-align: right"><el-icon size="12" color="#999" style="cursor: pointer"><Plus /></el-icon></div><el-tree:data="catalogTreeData":props="{ label: 'label', children: 'children' }":expand-on-click-node="false"ref="deptTreeRef"node-key="id"highlight-currentdefault-expand-all@node-contextmenu="rightClick"/><div class="rightMenu" v-show="showMenu"><ul><li v-for="(menu, index) in menus" @click="menu.click" :key="index"><el-icon><component :is="menu.icon" /></el-icon><span style="margin-left: 10px">{{ menu.name }}</span></li></ul></div>
</template>
<script lang="ts" setup>
import { FolderAdd, Message, Plus, UserFilled } from '@element-plus/icons-vue'
import { markRaw } from 'vue'
const showMenu = ref(false)const menus = ref<{icon: anyname: stringclick: () => void}[]
>([])const catalogTreeData = [{label: 'Level one 1',children: [{label: 'Level two 1-1',children: [{label: 'Level three 1-1-1'}]}]},{label: 'Level one 2',children: [{label: 'Level two 2-1',children: [{label: 'Level three 2-1-1'}]},{label: 'Level two 2-2',children: [{label: 'Level three 2-2-1'}]}]},{label: 'Level one 3',children: [{label: 'Level two 3-1',children: [{label: 'Level three 3-1-1'}]},{label: 'Level two 3-2',children: [{label: 'Level three 3-2-1'}]}]}
]// 右击方法
const rightClick = (event: MouseEvent, data: any, node: any, json: any) => {event.preventDefault()showMenu.value = false// 显示位置let menuPosition = document.querySelector('.rightMenu') as HTMLElementif (menuPosition) {menuPosition.style.left = event.clientX + 'px'menuPosition.style.top = event.clientY + 'px'}menus.value = [{icon: markRaw(FolderAdd), // 默认图标name: '新增子目录', // 默认名称click: () => {console.log('新增子目录')}},{icon: markRaw(Message),name: '编辑',click: () => {console.log('编辑')}},{icon: markRaw(UserFilled),name: '删除',click: () => {console.log('删除')}}]showMenu.value = truedocument.addEventListener('click', close)
}function close() {showMenu.value = false
}
</script>
<style scoped>
.rightMenu {position: fixed;z-index: 99999999;cursor: pointer;border: 1px solid #eee;box-shadow: 0 0.5em 1em 2px rgba(0, 0, 0, 0.1);border-radius: 6px;color: #606266;font-size: 14px;background: #fff;
}.rightMenu ul {list-style: none;margin: 0;padding: 0;border-radius: 6px;
}.rightMenu ul li {padding: 6px 10px;border-bottom: 1px solid #c8c9cc;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;
}.rightMenu ul li:last-child {border: none;
}.rightMenu ul li:hover {transition: all 0.5s;background: #ebeef5;
}
.rightMenu ul li:hover {transition: all 0.5s;background: #ebeef5;
}.rightMenu ul li:first-child {border-radius: 6px 6px 0 0;
}
.rightMenu ul li:last-child {border-radius: 0 0 6px 6px;
}
</style>

Vue3 Element-Plus el-tree 右键菜单组件

参考代码：实现Vue3Element-Plus(tree、table)右键菜单组件这篇文章的代码确实能用，但是存在错误，修正后的代码： <template><div style"text-align: right"><el-icon size"12" color"#…...

编程日记 2025/5/29 14:18:20

学成在线_内容管理模块_创建模块工程

学成在线模块工程 1.各个微服务依赖基础工程2.每个微服务都是一个前后端分离的项目3.xuecheng-plus-content：内容管理模块工程xuecheng-plus-content-modelxuecheng-plus-content-servicexuecheng-plus-content-api 1.各个微服务依赖基础工程 2.每个微服务都是一个前…...

编程日记 2025/6/4 0:15:56

Swift 专题二语法速查

一、变量 let, var 变量是可变的，使用 var 修饰，常量是不可变的，使用 let 修饰。类、结构体和枚举里的变量是属性。 var v1:String "hi" // 标注类型 var v2 "类型推导" let l1 "标题" // 常量class a {…...

编程日记 2025/6/2 5:22:29

vue2配置跨域后请求的是本机

这个我来说明一下，因为我们公司的后端设置解决了跨域问题，所以我有很久没有看相关的内容了，然后昨天请求了需要跨域的接口，请求半天一直不对，浏览器显示的是本机地址，我以为是自己配置错了，后面…...

编程日记 2025/6/3 16:20:36

Linux 音视频入门到实战专栏（视频篇）视频编解码 MPP

文章目录一、MPP 介绍二、获取和编译RKMPP库三、视频解码四、视频编码沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将介绍如何调用alsa api来进行音频数据的播放和录制。一、MPP 介绍瑞芯微提供的媒体处理软件平台…...

编程日记 2025/6/3 20:26:22

IT程序设计文档，软件需求设计文档，详细设计模板（Word原件）

1引言 1.1编写目的 1.2项目背景 1.3参考材料 2系统总体设计 2.1整体架构 2.2整体功能架构 2.3整体技术架构 2.4设计目标 2.5.1总体原则 2.5.2实用性和先进性 2.5.3标准化、开放性、兼容性 2.5.4高可靠性、稳定性 2.5.5易用性 2.5.6灵活性和可扩展性 2.5.7经济性…...

编程日记 2025/6/3 16:20:18

画流程图代码生成流程图流程图自动运行

一：在线平台典藏 drawio：完全免费；可拆入代码生成；使用方法 Kimi drawio生成流程图：Kimi里面生成Mermaid格式——>生成代码并复制——>进入drawio里面点插入"号"——>高级——>Mermaid——…...

编程日记 2025/6/4 1:13:21

庄小焱——2024年博文总结与展望

摘要大家好，我是庄小焱。岁末回首，2024 年是我在个人成长、博客创作以及生活平衡方面收获颇丰的一年。这一年的经历如同璀璨星辰，照亮了我前行的道路，也为未来的发展奠定了坚实基础。 1. 个人成长与突破在 2024 年&#xff0c…...

编程日记 2025/6/1 14:59:11

Unity3d 实时天气系统基于UniStorm插件和xx天气API实现(含源码)

前言实时天气在Unity3d三维数字沙盘中的作用非常重要，它能够增强虚拟环境的真实感和互动性，实时天气数据的应用可以提供更为精准和直观的天气信息支持，如果真实的数据加上特效、声音和模型反馈会提高产品档次，提高真实感。目前…...

编程日记 2025/6/1 14:09:17

【学习总结|DAY032】后端Web实战：登录认证

在 Web 后端开发中，登录认证是保障系统安全和用户数据隐私的关键环节。本文将结合实际开发案例，深入探讨登录功能与登录校验的实现思路和技术细节，希望能帮助读者更好地掌握这一重要知识点。一、登录功能实现 1.1 思路分析登录功能的核心…...

编程日记 2025/6/2 6:46:37

在 C++ 中实现调试日志输出

在 C 编程中，调试日志对于定位问题和优化代码至关重要。有效的调试日志不仅能帮助我们快速定位错误，还能提供有关程序运行状态的有价值的信息。本文将介绍几种常用的调试日志输出方法，并教你如何在日志中添加时间戳。 1. 使用 #ifdef _DEBUG…...

编程日记 2025/5/30 10:39:25

2-Kbengine+Unity3D多人在线游戏DEMO源码架构分析

2-Kbengine+Unity3D多人在线游戏DEMO源码架构分析目录一、服务器端 1、编写并生成我们的服务器端和客户端通用的游戏协议 2、认识Entity实体 3、官方DEMO-kbengine_demos_assets分析二、客户端...

编程日记 2025/5/29 9:51:42

Android系统开发（八）：从麦克风到扬声器，音频HAL框架的奇妙之旅

引言：音浪太强，我稳如老 HAL！ 如果有一天你的耳机里传来的不是《咱们屯里人》，而是金属碰撞般的杂音，那你可能已经感受到了 Android 音频硬件抽象层 (HAL) 出问题的后果！在 Android 音频架构中&#xff0c…...

编程日记 2025/6/4 16:00:33

使用nginx搭建通用的图片代理服务器，支持http/https/重定向式图片地址

从http切换至https 许多不同ip的图片地址需要统一进行代理部分图片地址是重定向地址 nginx配置主站地址：https://192.168.123.100/ 主站nginx配置 server {listen 443 ssl;server_name localhost;#ssl证书ssl_certificate ../ssl/ca.crt; #私钥文件ssl_ce…...

编程日记 2025/6/2 6:46:08

Java-数据结构-二叉树习题(1)

对于二叉树的学习，主要的还是得多多练习~毕竟二叉树属于新的知识，并且也并不是线性结构，再加上经常使用递归的方法解决二叉树的问题，所以代码的具体流程还是无法看到的，只能通过画图想象，所以还是必须多加练…...

编程日记 2025/6/3 1:25:46

记录 ReactiveSwift 简单使用导入 ReactiveSwift 库创建 TestViewModel 文件 enum JKTypeType: Int {case cloudcase devicecase weater }// 通过监听属性变化 class TestViewModel: NSObject {lazy var recordType: Property<JKTypeType> {return Property(recordTy…...

编程日记 2025/5/27 3:01:19

iOS - Objective-C 底层实现中的哈希表

1. 关联对象存储（AssociationsHashMap） // 关联对象的哈希表实现 typedef DenseMap<const void *, ObjcAssociation> ObjectAssociationMap; typedef DenseMap<DisguisedPtr<objc_object>, ObjectAssociationMap> AssociationsHashMa…...

编程日记 2025/6/2 17:56:50

SystemUI 实现音量条同步功能

需求：SystemUI 实现音量条同步功能具体问题以前在SystemUI 下拉框添加了音量条控制，目前发现在SystemUI下拉框显示状态的情况下， 按键或者底部虚拟导航点击音量加减时候，SystemUI音量条不更新。如下图：两个Syste…...

编程日记 2025/6/2 6:30:10

Android SystemUI——车载CarSystemUI加载（八）

Android 系统早期的状态栏和导航栏对于手机设备来说那是相当重要的，但是随着手机版本的不断更新，状态栏和导航栏对于手机的重要性在逐渐降低，特别是在快捷手势出现之后，导航栏几乎变得可有可无。但是对于当前如火如荼的车载系统来说，状态栏和导航栏却几乎是必备的，谷歌自…...

编程日记 2025/6/3 16:10:24

全类别机器人传感器模块推荐

视觉感知双目视觉模块：常见分辨率1280720，帧率30fps-60fps，水平视场角60-90，垂直视场角40-60，通过USB接口传数据。用于机器人导航、避障等，基于三角测量原理获取三维信息，定位更精准。单目摄像…...

编程日记 2025/6/4 6:14:57

怎么用python写个唤醒睡眠电脑的脚本？

环境： win10 python3.12 问题描述： 怎么用python写个唤醒睡眠电脑的脚本？ 解决方案： 1.唤醒处于睡眠状态的电脑通常不是通过编程直接实现的，而是依赖于硬件和操作系统提供的特性。对于Windows系统，可…...

编程日记 2025/5/29 9:50:21

2025春秋杯冬季赛 day1 crypto

文章目录通往哈希的旅程小哈斯RSA1ez_rsa 通往哈希的旅程根据提示推断是哈希函数，ai一下，推测大概率是一个sha1，让ai写一个爆破脚本即可 import hashlib# 给定目标 SHA-1 哈希值 target_hash "ca12fd8250972ec363a16593356abb1f3cf…...

编程日记 2025/6/2 23:47:58

C# 条件编译的应用

一、引言在 C# 的开发领域中，条件编译宛如一位幕后英雄，虽不常被开发者挂在嘴边，却在诸多关键场景中发挥着无可替代的作用。它就像是一把神奇的钥匙，能够依据特定的条件，精准地决定源代码中的某些部分是否被纳入最终…...

编程日记 2025/6/3 16:56:16

C语言编程笔记：文件处理的艺术

大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！ 本文目录引言正文一、为什么要用文件二、文件的分…...

编程日记 2025/6/3 5:23:23

了解 .mgJSON 文件

.mgJSON （Motion Graphics JSON）是一个基于标准 JSON 格式的文件扩展名，专门用于存储和交换与动态图形、动画和多媒体应用相关的数据。该格式支持静态和动态数据流，能够精确描述动画、物体变换、图形效果等。 .mgJSON 文件通过层级…...

编程日记 2025/6/4 4:31:47

通信协议之多摩川编码器协议

前言学习永无止境！本篇是通信协议之多摩川编码器协议，主要介绍RS485硬件层以及软件层帧格式。注：本文章为学习笔记，部分图片与文字来源于网络/应用手册，如侵权请联系！谢谢！ 一、多摩川协议概述…...

编程日记 2025/6/4 10:48:10

dbt Semantic Layer 详细教程-6 ：指标(metrics)配置规范及示例

前面几篇博文介绍了语义模型及实体、维度和度量规范及示例，一旦创建了语义模型，就该开始添加度量了。可以在与语义模型相同的YAML文件中定义度量，也可以将度量拆分为单独的YAML文件，放入任何其他子目录中（前提是这些子…...

编程日记 2025/6/3 20:22:25

Redis可视化工具--RedisDesktopManager的安装

需要安装使用，0.9.4以上是要收费的下载地址：https://github.com/uglide/RedisDesktopManager/releases/download/0.9.3/redis-desktop-manager-0.9.3.817.exe 详情：https://blog.csdn.net/u012688704/article/details/82251338 点击进行安…...

编程日记 2025/5/29 5:21:51

《汽车维护与修理》是什么级别的期刊？是正规期刊吗？能评职称吗？

问题解答： 问：《汽车维护与修理》是不是核心期刊？ 答：不是，是知网收录的正规学术期刊。问：《汽车维护与修理》级别？ 答：国家级。主管单位：中国汽车维修行业协会 …...

编程日记 2025/6/1 15:29:56

窥探QCC518x/308x系列与手机之间的蓝牙HCI记录与分析 - 手机篇

今天要介绍给大家的是, 当我们在开发高通耳机时如果遇到与手机之间相容性问题, 通常会用Frontline或Ellisys的Bluetooth Analyzer来截取资料分析, 如果手边没有这样的仪器, 要如何窥探Bluetooth的HCI log.这次介绍的是手机篇. 这次跟QCC518x/QCC308x测试的手机是Samsung S23 U…...

编程日记 2025/6/2 18:33:23

MySQL的不同SQL模式导致行为不同？

现象： 我在两个mysql库都有相同定义的表，其中一个字段是varchar(1200)。当我都对这个表进行insert操作，而且超过此字段的规定长度（此处是1200），这两库的行为是不一样的：库B是直接报错too long&…...

编程日记 2025/6/1 8:34:19

【SPIE出版｜EI、Scopus双检索】2025年绿色能源与环境系统国际学术会议（GEES 2025）

2025年绿色能源与环境系统国际学术会议（GEES 2025） 会议时间：2025年6月20-22日会议地点：中国-湖北最终截稿日期：2025年6月8日注册截止时间：2025年6月8日提交检索类型：EI Compendex 和 …...

编程日记 2025/5/31 10:33:29

搭建一个基于Spring Boot的书籍学习平台

搭建一个基于Spring Boot的书籍学习平台可以涵盖多个功能模块，例如用户管理、书籍管理、学习进度跟踪、笔记管理、评论和评分等。以下是一个简化的步骤指南，帮助你快速搭建一个基础的书籍学习平台。 — 1. 项目初始化使用 Spring Initializr 生成一个…...

编程日记 2025/6/1 20:13:50

SDL2：PC端编译使用 -- SDL2多媒体库使用音频实例

更多内容：XiaoJ的知识星球 SDL2：PC端编译使用 1. SDL2：PC端编译使用1.1 安装必要的依赖1.2 下载编译SDL21.3 SDL2使用示例：Audio1.4 运行示例程序 1. SDL2：PC端编译使用 1.1 安装必要的依赖首先，确保安装…...

编程日记 2025/6/1 5:11:39

考研计算机组成原理——零基础学习的笔记

第一章研究计算机硬件的学科。 1.计算机系统概述计算机系统硬件软件（系统软件：比如操作系统、数据库管理系统、标准程序库等，应用软件：QQ等） 1.2计算机的层次结构 1.2.1计算机硬件的基本组成冯诺伊曼计算机&a…...

编程日记 2025/6/2 18:32:53

STM32 FreeROTS Tickless低功耗模式

低功耗模式简介 FreeRTOS 的 Tickless 模式是一种特殊的运行模式，用于最小化系统的时钟中断频率，以降低功耗。在 Tickless 模式下，系统只在有需要时才会启动时钟中断，而在无任务要运行时则完全进入休眠状态，从而降低功…...

编程日记 2025/6/4 11:19:05

GAN 用于图像增强

工程需求，临时学一下gan的原理和基于图像增强的实现原理论文链接 Generative Adversarial Nets 我们提出了一个通过对抗过程来估计生成模型的新框架，其中我们同时训练两个模型：捕获数据分布的生成模型G和估计样本来自训练数据而不是G的…...

编程日记 2025/5/31 6:47:57

【RAG落地利器】向量数据库Qdrant使用教程

TrustRAG项目地址🌟：https://github.com/gomate-community/TrustRAG 可配置的模块化RAG框架环境依赖本教程基于docker安装Qdrant数据库，在此之前请先安装docker. Docker - The easiest way to use Qdrant is to run a pre-built Docker i…...

编程日记 2025/6/2 13:52:42

Day30下 - RAG系统

一、入库文档，问答查询 1. 数据读取 from langchain_core.documents import Document import randomfile_name"knowledge/熬夜救星护肤霜.txt" with open(filefile_name, mode"r", encoding"utf-8") as f:data f.read()# 随机生成…...

编程日记 2025/6/2 10:26:28

linux 安装PrometheusAlert配置钉钉告警

在 Linux 上安装 PrometheusAlert 并配置钉钉告警的步骤如下： 1. 准备工作钉钉机器人：在钉钉群中创建一个机器人，获取 Webhook URL。示例 Webhook URL：https://oapi.dingtalk.com/robot/send?access_token=your_dingtalk_token。PrometheusAlert 安装包：从 Prometheus…...

编程日记 2025/5/30 14:57:23

EAMM: 通过基于音频的情感感知运动模型实现的一次性情感对话人脸合成

EAMM: 通过基于音频的情感感知运动模型实现的一次性情感对话人脸合成 1所有的材料都可以在EAMM: One-Shot Emotional Talking Face via Audio-Based Emotion-Aware Motion Model网站上找到。摘要尽管音频驱动的对话人脸生成技术已取得显著进展，但现有方法要么忽…...

编程日记 2025/6/2 17:44:56

Linux提权-02 sudo提权

文章目录 1. sudo 提权原理1.1 原理1.2 sudo文件配置 2. 提权利用方式2.1 sudo权限分配不当2.2 sudo脚本篡改2.3 sudo脚本参数利用2.4 sudo绕过路径执行2.5 sudo LD_PRELOAD环境变量2.6 sudo caching2.7 sudo令牌进程注入 3. 参考 1. sudo 提权原理 1.1 原理 sudo是一个用于在…...

编程日记 2025/6/4 15:12:14

【Pandas】pandas Series apply

Pandas2.2 Series Function application, GroupBy & window 方法描述Series.apply()用于将一个函数应用到 Series 的每个元素或整个 Series pandas.Series.apply pandas.Series.apply 是 Pandas 库中 Series 对象的一个方法，用于将一个函数应用到 Series 的…...

编程日记 2025/6/2 17:25:18

Git学习笔记

Git学习笔记目录版本控制本地版本控制集中版本控制分布式版本控制基本使用方式 Git Config Git Remote Git Add Objects Refs Annotation Tag 追溯历史版本修改历史版本 Git GC Git Clone & Pull & Fetch Git Push 常见问题不同的工作流集…...

编程日记 2025/6/4 0:24:54

HTML5 Canvas实现的跨年烟花源代码

以下是一份基于HTML5 Canvas实现的跨年烟花源代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">…...

编程日记 2025/5/31 1:24:11

javaEE初阶————多线程初阶(2)

今天给大家带来第二期啦，保证给大家讲懂嗷； 1，线程状态 NEW安排了工作还未开始行动RUNNABLE可工作的，或者即将工作，正在工作BLOCKED排队等待WAITING排队等待其他事TIMED_WAITING排队等待其他事TERMINATED工作完成了 …...

编程日记 2025/6/2 8:01:40

linux下的NFS和FTP部署

目录 NFS应用场景架构通信原理部署权限认证Kerberos5其他认证方式命令serverclient查看测试系统重启后自动挂载 NFS 共享高可用实现 FTP对比一些ftp服务器1. **vsftpd (Very Secure FTP Daemon)**2. **ProFTPD (Professional FTP Daemon)**3. **Pure-FTPd**4. **WU-FTPD (Was…...

编程日记 2025/6/4 3:46:16

《Java核心技术II》可中断套接字

4.2.4 可中断套接字 SocketChannel可以中断套接字 SocketChannel channel.open(new InetSocketAddress(host,port)); 通道(channel)并没有与之相关联的流，实际上，所拥有的read和write方法都是通过Buffer对象实现的。如果不想处理缓冲区，…...

编程日记 2025/6/2 6:59:10

电梯系统的UML文档05

Dispatcher 不控制实际的电梯组件，但它在软件系统中是重要的。每一个电梯有一个ispatcher，主要功能是计算电梯的移动方向、移动目的地以及保持门的打开时间。它和系统中除灯控制器以外的几乎所有控制对象交互。安全装置也是一个环境对象，它…...

编程日记 2025/6/3 22:26:43

浅谈云计算19 | OpenStack管理模块（上）

OpenStack管理模块（上） 一、操作界面管理架构二、认证管理2.1 定义与作用2.2 认证原理与流程2.2.1 认证机制原理2.2.2 用户认证流程三、镜像管理3.1 定义与功能3.2 镜像服务架构3.3 工作原理与流程3.3.1 镜像存储原理3.3.2 镜像检索流程四、计算管理4.…...

编程日记 2025/5/29 6:34:42

相关文章：