Vue中 el-tree 实现添加右键菜单的方法（图文示例）

查看本专栏目录

Vue2面试题及答案（150道）

文章序号	vue2面试题150道
1	vue2 面试题及详细答案（01 - 20）
2	vue2 面试题及详细答案（21 - 40）
3	vue2 面试题及详细答案（41 - 60）
4	vue2 面试题及详细答案（61 - 70）
5	vue2 面试题及详细答案（71 - 80）
6	vue2 面试题及详细答案（81 - 90）
7	vue2 面试题及详细答案（91 - 100）
8	vue2 面试题及详细答案（101 - 120）
9	vue2 面试题及详细答案（121 - 130）
10	vue2 面试题及详细答案（131 - 140）
11	vue2 面试题及详细答案（141 - 150）

vue项目中，如何在el-tree 中显示右键菜单呢？这里的核心用到了 @node-contextmenu=“rightClick” ，具体的操作方法如下：

核心分析

node-contextmenu是el-tree一重要的属性， 当某一节点被鼠标右键点击时会触发该事件。共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。

这里用到了event来获取鼠标的位置，从而计算出右键弹窗的相对位置，点击哪一个，在哪几个的右上角显示弹簧信息。另外这里的CSS样式很重要，在需要的时候display：block，确保了不用的时候隐藏，用到的时候弹出。

效果图

template中片段

<el-tree 
      :data=