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 
            #dropdown
            v-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;
}
}

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

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