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

这篇具有很好参考价值的文章主要介绍了Element UI中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、最终效果

el-tree 右键菜单,element,vue,右键菜单,vue.js,elementui,javascript