element-plus 使el-dropdown只显示当前选择节点

本文主要是介绍element-plus 使el-dropdown只显示当前选择节点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 在数据对象中设置一个唯一标识符currentDrop，用来存放当前打开的下拉菜单的下标，初始化为null：

data() {
return {
currentDrop: null
};
},

2. 在每个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>

3. 在methods中实现handleVisibleChange方法：

methods: {
handleVisibleChange(id, visible){
this.currentDrop = visible ? id : null;
}
}

这样，每次点击下拉菜单的时候，只有当前的下拉菜单会被显示，其他的下拉菜单都会被隐藏。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！

这篇关于element-plus 使el-dropdown只显示当前选择节点的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---