vue2+elTree 实现右键菜单

背景：通过树形控件筛选出子节点数据渲染列表，再操作列表。操作在繁琐，现在需要直接通过树进行操作：删除，编辑，详情等等。

首先创建一个树

<el-tree
  ref="tree"
  :data="data"
  node-key="id"
  @node-expand="treeOpen"
  @node-collapse="treeClose"
  @node-contextmenu="openTreeMenu"
  @node-click="handleNodeClick"
/>

查看 element 的官方文档 =>

现在知道了，右键点击树的参数和事件。我们需要 data 中的 id，明确现在的需求

首先 写好静态的菜单

// html
<div v-show="showTreeMenu" class="treeMenu">
  <div @click="treeJump">详情</div>
  <div @click="treeEdit">编辑</div>
  <div @click="treeMark">标记</div>
  <div @click="treeDelete">删除</div>
</div>
// css
.treeMenu{
  position: fixed;
  z-index: 99999;
  top: 50%;
  left: 50%;
  background-color: white;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  div{
    padding: 3px 20px;
    box-sizing: border-box;
    //width: 50px;
    text-align: center;
  }
  div:hover{
    background-color: #eee;
    cursor: pointer;
  }
}

注：菜单默认不显示，最好不要嵌套太深，并且记得设置 z-index 避免被覆盖，其他样式根据自己需求都可以调整

添加右键事件，拿到需要的数据，触发显示菜单

openTreeMenu(event, data, node, target) {
  console.log(event, data, node, target)
  this.showTreeMenu = true // 显示菜单
  this.contextNode = data // 存储数据
  document.querySelector(.treeMenu).setAttribute(style,`top:${event.clientY}px;left:${event.clientX}px;`)
  document.addEventListener(click, this.closeTreeMenu)
  document.addEventListener(contextmenu, this.closeTreeMenu)
},

覆盖菜单样式后，添加了两个监听，用于关闭菜单。触发关闭后，及时移除监听事件

closeTreeMenu() {
  this.showTreeMenu = false // 关闭菜单
  document.removeEventListener(click, this.closeTreeMenu)
  document.removeEventListener(contextmenu, this.closeTreeMenu)
}

现在回到上面提到的另外三个方法，需要在他们三个的事件中，关闭右键菜单，否则我们的右键菜单打开后，操作节点树，是不会触发我们写的关闭监听的。

把菜单中的功能都加上，右键菜单完成。

如果有更好的方法和指正欢迎讨论。