elementui tree右键菜单

要实现 ElementUI Tree 的右键菜单，可以使用以下步骤：

1. 在 Tree 上监听 `contextmenu` 事件，阻止默认行为并记录当前点击的节点。
2. 在页面中创建一个菜单组件，可以使用 ElementUI 的 Dropdown 或者 Menu 组件。
3. 通过 `v-if` 或者 `v-show` 控制菜单的显示和隐藏。
4. 在菜单组件上监听对应的事件，比如 `click`，并根据当前记录的节点做出相应的操作。

以下是一个简单的实现示例：

<template>
  <div>
    <el-tree :data="data" @contextmenu="handleContextMenu"></el-tree>
    <el-dropdown v-if="showMenu" :style="{top: `${menuTop}px`, left: `${menuLeft}px`}" @command="handleMenuClick">
      <el-menu>
        <el-menu-item command="add">添加节点</el-menu-item>
        <el-menu-item command="edit">编辑节点</el-menu-item>
        <el-menu-item command="delete">删除节点</el-menu-item>
      </el-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: '节点一',
          children: [
            {
              label: '子节点一'
            },
            {
              label: '子节点二'
            }
          ]
        },
        {
          label: '节点二',
          children: [
            {
              label: '子节点三'
            },
            {
              label: '子节点四'
            }
          ]
        }
      ],
      showMenu: false,
      menuTop: 0,
      menuLeft: 0,
      currentNode: null
    }
  },
  methods: {
    handleContextMenu(event, node) {
      event.preventDefault()
      this.showMenu = true
      this.menuTop = event.pageY
      this.menuLeft = event.pageX
      this.currentNode = node
    },
    handleMenuClick(command) {
      switch (command) {
        case 'add':
          // 添加节点的操作
          break
        case 'edit':
          // 编辑节点的操作
          break
        case 'delete':
          // 删除节点的操作
          break
      }
      this.showMenu = false
    }
  }
}
</script>