Element UI中el-tree 添加右键菜单的方法，附带问题和解决方案_element-uiplus树形控件el-tree右键自定义菜单实现节点增删改

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

   <el-tree :data="data" 
:props="defaultProps"
 @node-contextmenu="rightClick" 
@node-click="treeNodeClick">
</el-tree>

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

          <!-- 树形控件右键组件 -->
          <div v-show="menuShow" class="tree_rightmenu" :style="{ ...rightMenu }">
            
              <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" >
 
                <el-menu-item id="menuitem" index="1" style="font-size: 12px;">
                  <span slot="title">新增课时</span>
                </el-menu-item>
                <el-menu-item index="2" style="font-size: 12px;">
                  <span slot="title">删 除</span>
                </el-menu-item>
              </el-menu>
          </div>

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