element ui tree 右键菜单

如何实现？

您可以在 element ui tree 中使用 Contextmenu 组件来实现右键菜单。您需要定义一个菜单项列表，并将其与 Contextmenu 组件绑定。当用户右键单击树中的节点时，Contextmenu 组件将显示所选菜单项。以下是一个示例代码片段：

<template>
  <el-tree
    :data="treeData"
    :expand-on-click-node="false"
    :default-expand-all="true"
    @node-contextmenu="handleContextMenu"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      {{ data.name }}
    </span>
  </el-tree>
  <el-contextmenu ref="contextmenu" @command="handleCommand">
    <el-menu-item :command="'add'">Add</el-menu-item>
    <el-menu-item :command="'edit'">Edit</el-menu-item>
    <el-menu-item :command="'delete'">Delete</el-menu-item>
  </el-contextmenu>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: 'Node 1',
          children: [
            { name: 'Leaf 1-1' },
            { name: 'Leaf 1-2' }
          ]
        },
        {
          name: 'Node 2',
          children: [
            { name: 'Leaf 2-1' },
            { name: 'Leaf 2-2' }
          ]
        }
      ]
    };
  },
  methods: {
    handleContextMenu(event, node) {
      event.preventDefault();
      this.$refs.contextmenu.show(event.clientX, event.clientY, { node });
    },
    handleCommand(command) {
      console.log(command);
    }
  }
};
</script>

在这个例子中，我们首先定义了一个 el-tree 组件，用于呈现树形结构。然后我们定义了一个 el-contextmenu 组件，其中包含了三个菜单项：Add、Edit 和 Delete。在 handleContextMenu 方法中，我们阻止了默认的右键单击行为，并调用了 el-contextmenu 组件的 show 方法来显示菜单。在 handleCommand 方法中，我们打印出用户选择的菜单项的命令。