vue项目中el-tree 添加右键菜单的方法

news2024/12/24 10:53:45

vue项目中,如何在el-tree 中显示右键菜单呢?这里的核心用到了 @node-contextmenu=“rightClick” ,具体的操作方法如下:

核心分析

node-contextmenu是el-tree一重要的属性, 当某一节点被鼠标右键点击时会触发该事件。共四个参数,依次为:event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

这里用到了event来获取鼠标的位置,从而计算出右键弹窗的相对位置,点击哪一个,在哪几个的右上角显示弹簧信息。另外这里的CSS样式很重要,在需要的时候display:block,确保了不用的时候隐藏,用到的时候弹出。

效果图

在这里插入图片描述

template中

<el-tree 
      :data="data" 
      show-checkbox 
      node-key="id" 
      :props="defaultProps" 
      @node-contextmenu="rightClick" 
      @check="treeCheck" 
    > 
    </el-tree> 
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{...rightMenu}"> 
      <ul> 
        <li><i class="el-icon-tickets"></i> 详情</li> 
        <li><i class="el-icon-edit"></i> 编辑</li> 
      </ul> 
    </div> 

methods:{}中

rightClick(e,data,node,comp){ 
      console.log('e:',e,'data',data) 
      this.rightMenu = {top:e.pageY+'px',left:e.pageX+'px'} 
      this.tmDisplay = true 
      const self = this 
      document.onclick=function(ev){ 
        if(ev.target!==document.getElementById('perTreeMenu')){ 
          self.tmDisplay = false 
        } 
      } 
    },

style中

.tree_menu{ 
  position: fixed; 
  display: block; 
  z-index: 20000; 
  background-color: #fff; 
  padding:5px 0; 
  border: 1px solid #ebeef5; 
  border-radius: 4px; 
  box-shadow:0 2px 12px 0 rgba(0,0,0,.1); 
 
  ul{ 
    margin:0; 
    padding:0; 
  } 
  ul li{ 
    list-style: none; 
    margin:0; 
    padding:0 15px; 
    font-size: 14px; 
    line-height: 30px; 
    cursor: pointer; 
  } 
  ul li:hover{ 
    background-color: #ebeef5 
  } 
} 

专栏目标

在vue和openlayers联合技术栈的操控下,本专栏提供行之有效的源代码示例。
(1)提供各种地图的加载示例:baidu、高德、google,bing,OSM,stamen,maptiler,天地图,mapbox等
(2)提供地图控件的展示示例:比例尺、鹰眼、自定义版权、旋转地图、缩放地图、缩放滑块、全屏显示等
(3)提供各种数据的加载示例:geojson、JSON、KML、WKT、WMTS、SHP、WKB、GPX、CSV、MVT、geoserver数据等
(4)提供上传解析和导出示例:上传KML、KMZ、Geojson、shp、zip等,导出Image、pdf、geojson、GML、polyline等
(5)提供各种图形的绘画示例:画点、线、圆、多边形、正方形、矩形、六星芒、自由线段、自由多边形等。
(6)提供路线轨迹相关的示例:画带有箭头的线段、实现轨迹路线动画、画闪闪发光的点划线、实现风场快速移动效果等。
(7)提供地图交互事件的示例:draw、modify、snap、select、pointermove、click、dblclick、singleclick、postrender
(8)提供页面基本控制的示例:zoom控制、extent控制、feature适配、添加网格线、拖拽放大,拖拽旋转等
(9)提供测量相关的代码示例:测量面积、测量距离、显示当前zoom、显示某点经纬度等。
(10)提供综合应用相关代码:切换地图、聚合数据、列表图层双向交互显示、显示楼层信息、右键菜单、GPS定位、卷帘效果等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/628344.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Sui Builder House日本京都站开启报名

下一站Sui Builder House将于6月29-30日在日本京都举行&#xff0c;为世界各地的开发者提供身临其境地学习和交流的机会。 春日的樱花已经绽放&#xff0c;黄金周也已经过去&#xff0c;现在是时候来京都参加Sui Builder House一起庆祝夏天的来临了。来自日本和周边地区的开发…

Java 常量池:静态常量池 动态常量池 字符串池

Java 常量池相关内容 Java 常量池概念分类&#xff1a;静态常量池、动态常量池、字符串常量池&#xff08;由于jdk1.7之后字符串常量池从运行时常量池分离到堆中&#xff09; 静态常量池 class 文件中CLass文件中除了有类的版本、字段、方法、接口等描述信息外&#xff0c;还有…

【C++】C++的类型转换

文章目录 1、C语言中的类型转换2、为什么C需要四种类型转换3、C强制类型转换&#xff08;重点&#xff09;3-1、static_cast3-2、reinterpret_cast3-3、const_cast3-4、dynamic_cast 4、RTTI&#xff08;了解&#xff09;5、常见面试题6、总结 1、C语言中的类型转换 在C语言中&…

选择合适的数据库引擎:InnoDB vs. MyISAM - 你的终极指南!

大家好&#xff0c;我是小米&#xff0c;一个热衷于技术分享的29岁程序员。今天&#xff0c;我将带大家一起探讨一下MySQL中两种常见的存储引擎&#xff1a;InnoDB和MyISAM。它们之间有许多差异&#xff0c;了解这些差异对于我们在选择合适的存储引擎时至关重要。废话不多说&am…

想做好接口测试,先把这些概念搞清楚了

接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口 比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你提供一个他们写好的方法来获取数据&#xff0c;你引用…

Springboot配置Log4j日志系统,并将日志存入数据库

Log4j是apache公司开发的一款日志管理系统&#xff0c;可以高效的管理系统中出现的BUG或者各种信息&#xff0c;并且可以已文本的方式或者数据库存入的方式来记录数据 第一步&#xff1a;导入依赖 在pom.xml中导入Log4j依赖 <!-- https://mvnrepository.com/artifact/log…

通达信通道交易系统选股公式,结合MACD绿柱缩短底背离

亚历山大埃尔德在《以交易为生》&#xff08;原书第2版&#xff09;中&#xff0c;将价格在通道中的波动比喻为河流在河谷中流动。当河流碰到右岸时&#xff0c;会向左转&#xff1b;碰到左岸时&#xff0c;会向右转。价格上涨时&#xff0c;常在碰到隐形天花板时停止上涨&…

java SSM 啤酒配送管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 啤酒配送管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…

【每天学习一点新知识】应急响应快速指南

一、前言 马上就端午节啦&#xff0c;提前祝大家端午快乐&#xff0c;顺便把之前的六一也给补上&#xff0c;希望大家每天的生活都跟童话世界一样美好&#xff0c;充满希望&#xff08;虽然现实很残酷&#xff09;。 最近更的没有以前勤快了&#xff0c;一是在实习&#xff0c;…

基于smardaten无代码开发舆情分析系统

一、前言 在日常生活中&#xff0c;有各种各样的资讯、社交平台。这些平台充斥着大量信息&#xff0c;这些信息中隐含了许多有用数据&#xff0c;但是这些数据无法之间获取&#xff0c;且难以展示&#xff0c;于是就有了舆情分析系统。 舆情分析系统是一个综合的系统&#xf…

elementui tree 支持虚拟滚动和treeLine (上)

背景&#xff1a;在使用elementuivue2.x进行项目开发时&#xff0c;有用到el-tree组件&#xff0c;但是在数据很多时会卡顿 基于以上背景elementui 提供的el-tree组件无法满足需求。 期间在网上调研了很多相关的tree组件&#xff0c;例如&#xff1a; vue-treeszTreesjsTrees…

d3dcompiler_47.dll缺失怎么修复,总结五个修复方法

d3dcompiler_47.dll是一个由微软公司开发的动态链接库文件(DLL File)&#xff0c;属于Microsoft Direct3D Shader Compiler 库的一部分&#xff0c;该库包含用于编写和编译 Direct3D 11 的着色器的编译器源代码。这个 DLL 文件是 Direct3D 11 中非常重要的组成部分&#xff0c;…

什么是微软的 Application Framework?

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天来看一下什么是微软的 Application Framework&#xff1f; 到底什么是 Application Framework&#xff1f; 还没有真正掌握任何一套Application Framework的使用之前&#xff0c;就来研究这个真的不是很…

海龟绘图turtle库之二级基础编程题

海龟绘图turtle库之二级基础编程题 python2.6版本中后引入的一个简单的绘图工具&#xff0c;叫做海龟绘图(Turtle Graphics),turtle库是python的内部库,使用导入即可 import turtle 原理&#xff1a; Turtle库是Python语言中一个很流行的绘制图像的函数库&#xff0c;想象一个…

HTML(结构)+CSS(样式基础)

一、HTML前期准备 1. 认识HTML HTML&#xff08;Hyper Text Markup Language&#xff09;&#xff1a;超文本标记语言主要通过标签对网页中的文本、图片、音频、视频等内容进行描述个人理解&#xff1a;对所有需要描述的内容使用标签进行表示 2. HTML布置页面的固定结构 每一个…

APP UI自动化测试,思路全总结在这里了

首先想要说明一下&#xff0c;APP自动化测试可能很多公司不用&#xff0c;但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的&#xff0c;所以为了更好的待遇&#xff0c;我们还是需要花时间去掌握的&#xff0c;毕竟谁也不会跟钱过不去。 接下来&#xff0c…

Windows上不可或缺的5款宝藏软件,工作效率拉满!

职场小白与大牛的区别&#xff1a;小白需要耗费大半天琢磨的事情&#xff0c;而大牛可以只花5分钟就能处理。 “牛人”&#xff0c;即拥有过人之处&#xff0c;专业、经验、技术等等&#xff0c;学会灵活运用高效率的工具也是关键的一点。工具找得好&#xff0c;运用得快&#…

轴承故障诊断(一维时序信息结合二维图像实现故障诊断,python编程,十分类)

1.模型介绍&#xff1a; 2.数据集介绍&#xff08;凯斯西楚大学数据集&#xff0c;实现对12k采集频率下四种负载的诊断&#xff0c;同时也实现对48k采集频率下数据的诊断&#xff09;&#xff1a;十分类 0文件夹装的是0HP下原始的数据&#xff08;包含十种故障&#xff09;&…

【深入理解Linux内核锁】二、中断屏蔽

我的圈子&#xff1a; 高级工程师聚集地 我是董哥&#xff0c;高级嵌入式软件开发工程师&#xff0c;从事嵌入式Linux驱动开发和系统开发&#xff0c;曾就职于世界500强公司&#xff01; 创作理念&#xff1a;专注分享高质量嵌入式文章&#xff0c;让大家读有所得&#xff01; …

JMM如何实现volatile写/读的内存语义

内存屏障类型表 StoreLoad Barriers是一个“全能型”的屏障&#xff0c;它同时具有其他3个屏障的效果。现代的多处理器大多支持该屏障&#xff08;其他类型的屏障不一定被所有处理器支持&#xff09;。执行该屏障开销会很昂贵&#xff0c;因为当前处理器通常要把写缓冲区中的数…