- 在数据对象中设置一个唯一标识符currentDrop，用来存放当前打开的下拉菜单的下标，初始化为null：
data() {
return {
currentDrop: null
};
},
- 在每个el-dropdown-item上使用visible-change方法，当下拉菜单的状态发生变化时，更新currentDrop的值。id是你的树节点id：
<template #default="{ node, data }"> <el-dropdown trigger="contextmenu" :ref="'dropdown'+ node.data.nodeId "@visible-change="(visible) => handleVisibleChange(node, visible)"><span class="el-dropdown-link">{{ node.label }}</span><template #dropdownv-if="currentDrop && currentDrop == node.data.nodeId"><el-dropdown-menu><el-dropdown-item :disabled="isNewProject"@click="handleModal">新建</el-dropdown-item><el-dropdown-item :disabled="!nodeIdFlag"@click="deleteNodes">删除</el-dropdown-item><el-dropdown-item @click="renameNode":disabled="!displayNameFlag">重命名</el-dropdown-item> <el-dropdown-item @click="handleMessageModal">属性</el-dropdown-item> </el-dropdown-menu></template></el-dropdown></template>
- 在methods中实现handleVisibleChange方法：
methods: {
handleVisibleChange(id, visible){
this.currentDrop = visible ? id : null;
}
}
这样，每次点击下拉菜单的时候，只有当前的下拉菜单会被显示，其他的下拉菜单都会被隐藏。
以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！
)
