Element Plus 中的 el-tree 实现右键点击节点弹出菜单并执行不同操作

在前端开发中，树形结构常用于显示层级数据。Element Plus 提供了 el-tree 组件，方便地渲染树形数据。

html部分

      <div class="mt-8">
        <!-- 右键菜单 -->
        <el-popover
          ref="popover"
          v-model:visible="contextMenuVisible"
          placement="bottom-start"
          width="160"
          :popper-style="{ left: `${menuPosition.x}px`, top: `${menuPosition.y}px`, position: 'absolute' }"
          trigger="manual">
          <div class="flex flex-col items-center">
            <div @click="editNode" class="py-2.5 border-b w-full cursor-pointer text-center">修改</div>
            <div @click="addNode" class="py-2.5 border-b w-full cursor-pointer text-center">新增知识点</div>
            <div @click="deleteNode" class="py-2.5 border-b w-full cursor-pointer text-center">删除</div>
          </div>
        </el-popover>

        <!-- 树形结构 -->
        <el-tree
          ref="treeRef"
          :data="list"
          node-key="id"
          :props="defaultProps"
          @node-click="handleNodeClick"
          @node-contextmenu="handleRightClick"
        />
      </div>

事件处理和功能实现

  // 菜单相关
  const contextMenuVisible = ref(false);
  const menuPosition = ref({ x: 0, y: 0 });
  const selectedNode = ref<any>(null);
  // 处理右键点击事件
  const handleRightClick = (event: MouseEvent, node: any, treeNode: any) => {
    event.preventDefault();
    selectedNode.value = node;
    menuPosition.value = { x: event.clientX, y: event.clientY }; // 获取鼠标点击的位置
    contextMenuVisible.value = true;
  };
  // 新增节点
  const addNode = () => {
    contextMenuVisible.value = false;
    if (selectedNode.value) {
      // 在这里处理你的数据调取新增方法
    }
  };
  // 修改节点
  const editNode = () => {
    contextMenuVisible.value = false;
    if (selectedNode.value) {
      // 在这里处理修改数据然后请求方法
    }
  };

  // 删除节点
  const deleteNode = () => {
    contextMenuVisible.value = false;
    if (selectedNode.value) {
      ElMessageBox.confirm(
        '确定删除该条信息数据吗?',
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        // 请求删除节点的方法  删除节点
      }).catch(() => {
        
      })
    }
  };

功能实现说明
1.右键点击节点： 通过 @node-contextmenu 事件，我们捕获用户在节点上点击鼠标右键的事件，并阻止浏览器默认的右键菜单。

2.自定义菜单显示： 使用一个 el-popover 元素作为右键菜单容器，菜单的位置通过 event.clientX 和 event.clientY 动态设置，以确保菜单在用户点击的位置显示。

3.执行操作： 根据用户在右键菜单中点击的选项（如“编辑”、“删除”、“添加子节点”），执行不同的操作。比如使用 ElMessageBox 提示框进行编辑、删除或添加子节点。