vue2+elTree 实现右键菜单

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

首先创建一个树

 查看 element 的官方文档 => elTree

node-contextmenu	当某一节点被鼠标右键点击时会触发该事件	共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-expand	节点被展开时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse	节点被关闭时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身

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

首先 写好静态的菜单

// html

  
详情
  
编辑
  
标记
  
删除

// 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)
}

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

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

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