elementui|vue2+elTree 实现右键菜单 javascript|vue.js

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

文章图片

【elementui|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) }

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