element-ui 树形控件使用右键菜单
Mar 29, 2019
element-ui 的树形控件本身是不支持右键的,官方文档上推荐把操作按钮展示在对应的项上,但是如果操作项比较多,或者本身就有信息需要展示在项上,再加上这些操作按钮就会比较凌乱。正好公司业务上有这个需求,因此我在网上搜了一圈,找到比较好的解决方式。
整体思路就是:当右键时,调用左键的 node-click
方法,通过 node-click
将获取到的数据储存起来,然后展示右键菜单,获取到数据后,怎么处理就可以自由发挥了。
右键菜单我使用了 vue-context-menu 插件,引入方式可看 README
。
下面是具体代码:
1 | <div id="app"> |
1 | export default { |
1 | html, |
以上就是完整代码。
当然还有另外一种思路。el-tree 自带有 node-contextmenu
事件,如果使用了这个事件,原生的右键事件都会被阻止,因此上面方法不能与这个事件一起使用,会造成右键插件无法正常显示。但是 node-contextmenu
事件返回了非常详细的参数:依次为 event、传递给 data
属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。由于可以获取到 event,里面带有鼠标右击的坐标,因此完全可以自己写一个右键菜单,而且这个事件的回调参数更为丰富。