最简简单单El-tree添加右键菜单，一键完成

利用 Element UI 的 El-tree 组件添加右键菜单，增强树形结构的可操作性

简介

Element UI 的 El-tree 组件是构建树形结构的利器，但默认情况下它并没有提供右键菜单的功能。使用右键菜单，可以为用户提供更多操作选项，让用户更方便地对树形结构中的数据进行增删改查。

如何添加 El-tree 右键菜单

1. 引入 El-menu 组件

首先，需要在项目中引入 El-menu 组件：

import { ElMenu } from 'element-ui';

2. 定义一个右键组件

右键组件用来显示右键菜单。可以创建一个名为 RightMenu 的组件：

<template>
  <el-menu>
    <el-menu-item @click="handleAddItem">添加</el-menu-item>
    <el-menu-item @click="handleEditItem">编辑</el-menu-item>
    <el-menu-item @click="handleDeleteItem">删除</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleAddItem() {
      // 添加一项数据
    },
    handleEditItem() {
      // 编辑一项数据
    },
    handleDeleteItem() {
      // 删除一项数据
    }
  }
}
</script>

3. 在 El-tree 中添加方法

在 El-tree 组件中，添加一个名为 @node-contextmenu 的事件监听器，并绑定到 RightMenu 组件的 handleRightClick 方法：

<el-tree @node-contextmenu="handleRightClick">
  ...
</el-tree>

4. 防止浏览器默认菜单弹出

点击右键时，会默认弹出浏览器的右键菜单栏。为了防止这种情况，需要在 RightMenu 组件中使用 e.preventDefault() 方法：

<template>
  <el-menu @contextmenu.native="handleContextMenu">
    ...
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleContextMenu(e) {
      e.preventDefault();
    }
  }
}
</script>

5. 点击树状节点时关闭右键组件

在 El-tree 组件中，添加一个名为 @click 的事件监听器，并绑定到 RightMenu 组件的 handleClose 方法：

<el-tree @click="handleClose">
  ...
</el-tree>

结语

通过添加右键菜单，可以为 El-tree 组件提供更多操作选项，让用户更方便地对树形结构中的数据进行操作。这将极大地提高用户体验，并简化数据管理流程。

常见问题解答

1. 如何添加自定义右键菜单项？

   可以修改 RightMenu 组件中的 el-menu-item 元素来添加自定义菜单项。

2. 如何获取点击的树形节点数据？

   在 handleRightClick 方法中，可以使用 e.node 访问点击的树形节点数据。

3. 如何禁用右键菜单？

   可以在 El-tree 组件中设置 :contextmenu="false" 属性来禁用右键菜单。

4. 如何调整右键菜单的位置？

   可以使用 :absolute="true" 属性将右键菜单定位在鼠标指针处。

5. 如何更改右键菜单的外观？

   可以使用 CSS 样式自定义右键菜单的外观，例如字体、颜色和边框。