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

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定位、卷帘效果等。