<el-tree :highlight-current="highlight" :data="folderList" :props="defaultProps" @node-contextmenu="rightClick" @node-click="handleNodeClick"  style="min-width: 100%;display: inline-block;"></el-tree>
 
<div id="contextmenu"
           v-show="menuVisible"
           class="menu">
        <div class="contextmenu__item" @click="addDialogFolder"
             >添加</div>
        <div class="contextmenu__item"
             >删除</div>
         <div class="contextmenu__item"
         >更名文件</div>
    </div>
methods: {
          foo() {
            // 取消鼠标监听事件 菜单栏
            this.menuVisible = false
            document.removeEventListener('click', this.foo) // 关掉监听,
          },
          styleMenu(menu) {
            if (event.clientX > 1800) {
              menu.style.left = event.clientX - 100 + 'px'
            } else {
              menu.style.left = event.clientX + 1 + 'px'
            }
            document.addEventListener('click', this.foo) // 给整个document新增监听鼠标事件,点击任何位置执行foo方法
            if (event.clientY > 700) {
              menu.style.top = event.clientY - 30 + 'px'
            } else {
              menu.style.top = event.clientY - 10 + 'px'
            }
          },
          rightClick(row, column, event){
            // if(column.id){
              this.pid = column.id;
              this.testModeCode = row.testModeCode
              this.menuVisible = false // 先把模态框关死,目的是 第二次或者第n次右键鼠标的时候 它默认的是true
              this.menuVisible = true // 显示模态窗口,跳出自定义菜单栏
              // event.preventDefault() //关闭浏览器右键默认事件
              this.CurrentRow = row
              var menu = document.querySelector('.menu')
              this.styleMenu(menu)
            // }else{
            // }
            
          },
}
 
style{
.contextmenu__item {
  display: block;
  line-height: 34px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.menu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

}

elementui树状结构添加右键点击事件的更多相关文章

  1. react添加右键点击事件

    1.在HTML里面支持contextmenu事件(右键事件).所以需要在组建加载完时添加此事件,销毁组建时移除此事件. 2. 需要增加一个state,名称为visible,用来控制菜单是否显示.在_h ...

  2. 给ECharts添加右键点击事件,实现右键功能菜单

    由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2 ...

  3. Android无限级树状结构

    通过对ListView简单的扩展.再封装,即可实现无限层级的树控件TreeView. package cn.asiontang.nleveltreelistview; import android.a ...

  4. 由简入繁实现Jquery树状结构

    在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...

  5. 使用Map辅助拼装树状结构,消除递归调用

    目前菜单或其他树状结构在数据库中的存储,多数是以一个parentid作为关联字段,以一维形式存储.使用时全部查询出来,然后在内存中拼装成树状结构.现在主要涉及的是拼装方法的问题. 一般可以进行 递归调 ...

  6. tkinter中树状结构的建立(十四)

    树状结构的建立 import tkinter from tkinter import ttk wuya = tkinter.Tk() wuya.title("wuya") wuya ...

  7. 将lits集合转化为树状结构

    一,bean的类型: public class DeptListRES { /** * 子节点 */ private List<DeptListRES> children; private ...

  8. 用Django ORM实现树状结构

    前言 之前看对于用关系数据库实现树状结构的方法就知道一直做自关联的表,但是感觉自关联查询太慢了,最近看到一篇文章,感觉视野开拓了好多,文章:数据库表设计,没有最好只有最适合来自:微信. 下面就针对这里 ...

  9. JQuery 树状结构 jQuery-treeview.js 插件

    由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...

  10. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

随机推荐

  1. DateFormat类&SimpleDateFrormat类介绍-Dateformat类的format方法parse方法

    DateFormat类&SimpleDateFrormat类介绍 java.text.DateFormat是日期/时间格式化子类的抽象类,我们通过这个类可以帮我们完成日期和文本之间的转换,也就 ...

  2. SQL Case条件判断SQL

    问题描述:在表中取到一些值做出判断,配合监控监测一些表中的数据.使用select case when if 来做条件查询判断 CASE 表达式遍历条件并在满足第一个条件时返回一个值(类似于 if-th ...

  3. 前端知识点(js部分)

    目录 一.JS简介 简介 ECMAScript的历史 二.JS基础 1.注释语法 2.引入js的多种方式 3.结束符号 三.变量与常量 编写和运行js代码的两种方式 变量声明 四.基本数据类型 1.数 ...

  4. Python实用代码片段(1)-rot13加密

    Python之禅:THIS.PY 你安装了python之后,能在Lib目录下找到一个this.py的文件,就是此处的内容. s = """Gur Mra bs Clgub ...

  5. Djanngo-bbs项目

    1.项目开发基本流程 1.需求分析 2.架构设计 3.分组开发 4.提交测试 5.交付上线 2.项目流程 仿造博客园项目(核心:文章的增删改查) 1.表分析: 1.1用户表 1.2个人站点表 1.3文 ...

  6. (一) MdbCluster分布式内存数据库——基础架构介绍

    (一) MdbCluster分布式内存数据库--基础架构介绍   这个项目是怎么开始的我已经有些记不清楚了,大概是原来的内存数据库很不好用,一次次地让我们踩坑,我又自以为是地觉得可以做一个更好的出来. ...

  7. JavaScript: symbol 和 string key 取值用法

    '' 做 key 可以被 . 或者 [] 运算符取出 [""] 做 key 同样可以被 . 或者 [] 运算符取出 symbol 做 key 只能被 . 取出 [symbol] 做 ...

  8. C++ 从数组中拿值,每个值不相同

    代码和思路 原理就是生成0,n个索引,每个索引不相同即可. 索引再到数组拿数据就行 #include <iostream> #include <vector> #include ...

  9. JAVA虚拟机25---编译器,解释器,JAVA中的即时编译

    https://www.cnblogs.com/somefuture/p/14272221.html 1.简介 编译器:是一种计算机程序,负责把一种编程语言编写的源码转换成另外一种计算机代码,后者往往 ...

  10. 模型预处理层介绍(1) - Discretization

    预处理的作用主要在于将难以表达的string或者数组转换成模型容易训练的向量表示,其中转化过程大多是形成一张查询表用来查询. 常见的预处理方式包括: class Discretization: Buc ...