el-tree实现右键菜单重命名

要实现右键菜单重命名功能，你可以使用el-tree组件的contextmenu事件和自定义右键菜单来实现。

首先，在el-tree组件上添加contextmenu事件监听器，可以使用@contextmenu指令或v-contextmenu指令。例如：

<el-tree @contextmenu="showContextMenu">
  <!-- 树节点内容 -->
</el-tree>

接下来，在你的Vue实例中定义showContextMenu方法来处理右键菜单的显示和点击事件。在该方法中，你可以使用event对象的clientX和clientY属性来获取鼠标点击的位置，然后显示自定义的右键菜单。例如：

methods: {
  showContextMenu(event) {
    event.preventDefault(); // 阻止默认右键菜单弹出
    const menu = document.getElementById('custom-menu'); // 获取自定义右键菜单元素
    menu.style.left = event.clientX + 'px'; // 设置菜单的水平位置
    menu.style.top = event.clientY + 'px'; // 设置菜单的垂直位置
    menu.style.display = 'block'; // 显示菜单
    // 其他逻辑...
  }
}

注意，上述代码中获取自定义右键菜单元素的方式使用了getElementById，所以需要在页面中定义一个id为custom-menu的元素作为自定义右键菜单的容器，并设置其样式为隐藏。例如：

<div id="custom-menu" style="display: none;">
  <!-- 自定义右键菜单内容 -->
</div>

最后，你还需要在自定义右键菜单的内容中添加一个重命名选项，并为其添加点击事件监听器。在点击事件处理函数中，你可以通过获取当前选中的树节点，进行相应的重命名操作。例如：

<div id="custom-menu" style="display: none;">
  <div @click="renameNode">重命名</div>
</div>

methods: {
  renameNode() {
    // 获取当前选中的树节点
    const selectedNode = this.$refs.tree.getCurrentNode();
    // 执行重命名逻辑...
  }
}

这样，当用户右键点击el-tree的节点时，会触发showContextMenu方法显示自定义右键菜单，点击重命名选项会执行renameNode方法进行重命名操作。你可以根据具体的业务需求，在renameNode方法中实现对节点的重命名逻辑。