背景：通过树形控件筛选出子节点数据渲染列表，再操作列表。操作在繁琐，现在需要直接通过树进行操作：删除，编辑，详情等等。
首先创建一个树
<el-tree
ref="tree"
:data="data"
node-key="id"
@node-expand="treeOpen"
@node-collapse="treeClose"
@node-contextmenu="openTreeMenu"
@node-click="handleNodeClick"
/>
?查看 element 的官方文档 =>?elTree
| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
| node-click | 节点被点击时的回调 | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
| node-expand | 节点被展开时触发的事件 | ?? ?共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
| node-collapse | 节点被关闭时触发的事件 | ?? ?共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
现在知道了，右键点击树的参数和事件。我们需要 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)
}现在回到上面提到的另外三个方法，需要在他们三个的事件中，关闭右键菜单，否则我们的右键菜单打开后，操作节点树，是不会触发我们写的关闭监听的。
把菜单中的功能都加上，右键菜单完成。
?如果有更好的方法和指正欢迎讨论。