element中Tree结构右键实现自定义的菜单(一)

要在element中Tree结构实现右键自定义菜单，需要以下步骤：

1. 在组件中引入右键菜单组件

首先，需要在组件中引入一个右键菜单组件。可以使用element-ui提供的ContextMenu组件或者其他第三方组件。在这里，我们以ContextMenu组件为例。

import ContextMenu from 'element-ui/lib/contextmenu'
import 'element-ui/lib/theme-chalk/contextmenu.css'

export default {
  components: {
    ContextMenu
  },
  // ...
}

2. 在Tree节点上绑定右键菜单

其次，需要在每个Tree节点上绑定右键菜单。可以使用`contextmenu`事件来触发右键菜单，然后通过`showMenu`方法来显示菜单。

<el-tree :data="data" :props="defaultProps" @node-contextmenu="handleContextMenu">
  <template v-slot="{ node }">
    <div>{{ node.label }}</div>
    <context-menu ref="contextmenu" :menu-items="menuItems" @menu-click="handleMenuClick"></context-menu>
  </template>
</el-tree>

methods: {
  handleContextMenu(e, node) {
    e.preventDefault()
    this.$refs.contextmenu.showMenu(e.clientX, e.clientY)
    this.currentNode = node
  },
  handleMenuClick(command) {
    // 处理菜单点击事件
  }
}

在上面的代码中，我们将ContextMenu组件放在了Tree节点的v-slot中。当右键菜单被触发时，调用`showMenu`方法来显示菜单，并将当前节点保存在`currentNode`中以备后用。

3. 定义菜单项

最后，需要定义右键菜单的每个菜单项。可以通过定义一个数组来实现。每个菜单项都是一个对象，包含`command`属性表示菜单项的唯一标识符，`label`属性表示菜单项的文本内容。

data() {
  return {
    menuItems: [
      { command: 'add', label: '添加' },
      { command: 'edit', label: '编辑' },
      { command: 'delete', label: '删除' }
    ]
  }
}

在菜单项被点击时，会触发`menu-click`事件，并将对应的`command`作为参数传递给事件处理函数进行处理。

以上就是在element中Tree结构实现右键自定义菜单的步骤。