Element ui el-tree 右键菜单

在Element UI的el-tree组件中，可以通过监听节点的contextmenu事件来实现自定义的右键菜单。以下是一个简单的例子，展示了如何在el-tree组件中添加自定义的右键菜单：

<template>
  <el-tree
    :data="data"
    @node-contextmenu="openMenu"
    ref="tree"
  ></el-tree>
  <div
    v-show="menuVisible"
    :style="{left: menuX + 'px', top: menuY + 'px'}"
    class="custom-menu"
  >
    <ul>
      <li @click="handleMenuClick('add')">添加</li>
      <li @click="handleMenuClick('edit')">编辑</li>
      <li @click="handleMenuClick('delete')">删除</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [/* 树形数据 */],
      menuX: 0,
      menuY: 0,
      menuVisible: false
    };
  },
  methods: {
    openMenu(event, data, node, element) {
      event.preventDefault();
      this.menuX = event.clientX;
      this.menuY = event.clientY;
      this.menuVisible = true;
      // 可以根据节点数据决定菜单项的显示与否
    },
    handleMenuClick(action) {
      // 处理菜单项的点击事件
      // 例如：根据action执行不同的操作
      this.menuVisible = false;
    }
  }
};
</script>
 
<style>
.custom-menu {
  position: fixed;
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  z-index: 1000;
  display: none;
}
.custom-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-menu ul li {
  padding: 5px 15px;
  cursor: pointer;
}
.custom-menu ul li:hover {
  background-color: #eee;
}
</style>

在这个例子中，我们监听了el-tree组件的node-contextmenu事件，并在openMenu方法中设置了自定义菜单的位置和显示。点击菜单项时，通过handleMenuClick方法处理点击事件。菜单的样式通过CSS定制。