Element UI中el-tree 添加右键菜单的方法，附带问题和解决方案

1、在el-tree 中添加方法 @node-contextmenu="rightClick"

2、建立一个右键组件，可以使用 el-menu 组件，优点是，可以借助el-menu 的 selec方法进行增删改查以及样式不用手写了，弊端是不容易获取点击的Dom，先暂时这样写吧

          
          
            
              
                
                  新增课时
                
                
                  删 除
                
              
          

3、methods中的写法

  rightClick(e, data, node) {
      this.menuShow = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
      this.menuShow = true
      e.preventDefault() //关闭浏览器右键默认事件
      this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
      document.addEventListener('click',(ev)=>{
        // ev.stopImmediatePropagation()
        if(ev.target!==document.querySelector('.el-menu-item.is-active')){ 
          this.foo() 
        }
      })
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuShow = false
      document.removeEventListener('click', this.foo) // 关掉监听，
    },

3、点击树状节点时，关闭右键组件

  treeNodeClick(){
      this.foo() 
    },

4、css样式

.tree_rightmenu {
  position: fixed;
  width: 120px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 1000;
}

5、最终效果

存在问题：在右键弹出的组件中，点击右键，会默认弹出浏览器的右键菜单栏；

想到的解决办法是，点击该节点时，使用原生js的 contextmenu 事件，在事件中用 e.preventDefault（）方法进行阻止

最后建议使用vue右键插件 vue-contextmenujs