elementui menu右键菜单

要在 ElementUI 的菜单中添加右键菜单，可以使用 `context-menu` 组件。这个组件可以在任何元素上添加右键菜单。下面是一个简单的示例：

<template>
  <div>
    <el-menu ref="menu" @contextmenu="handleContextMenu">
      <el-submenu index="1">
        <template slot="title">菜单一</template>
        <el-menu-item-group title="分组一">
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组二">
          <el-menu-item index="1-3">选项3</el-menu-item>
          <el-menu-item index="1-4">选项4</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    <el-context-menu ref="contextMenu">
      <el-menu-item @click="handleMenuItemClick">右键菜单选项</el-menu-item>
    </el-context-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleContextMenu(event) {
      event.preventDefault();
      this.$refs.contextMenu.show(event.clientX, event.clientY);
    },
    handleMenuItemClick() {
      console.log('右键菜单被点击');
    },
  },
};
</script>

在这个示例中，我们在 `el-menu` 上绑定了 `contextmenu` 事件，当用户右键点击菜单时，会触发这个事件。在事件处理函数中，我们使用 `event.preventDefault()` 阻止默认的右键菜单行为，并调用 `this.$refs.contextMenu.show()` 方法显示自定义的右键菜单。`show()` 方法需要传入鼠标的坐标，这里使用 `event.clientX` 和 `event.clientY` 来获取。最后，我们在自定义的右键菜单中添加了一个菜单项，并监听了它的点击事件。