ElementUI Dropdown 下拉菜单

最新推荐文章于 2025-05-30 09:06:30 发布

shykevin

最新推荐文章于 2025-05-30 09:06:30 发布

阅读量4.3k

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/shykevin/article/details/113895267

本文介绍了在后台项目中使用Element UI的Dropdown组件时遇到的问题，即el-dropdown-item的点击事件无法触发。通过查阅官方文档，发现应当使用`@command`指令来绑定事件，并通过`command`参数进行不同的操作判断。示例代码展示了如何正确绑定`handleCommand`方法，根据用户点击的菜单项（如'password'或'logout'）调用相应的方法。通过这种方式，可以实现下拉菜单的功能定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

在后台项目中，使用Dropdown 下拉菜单时，发现对el-dropdown-item绑定点击事件时，一直没有触发，比如：

<el-dropdown-item @click="password()">修改密码</el-dropdown-item>

后来查阅官方文档，原来是使用方式不对。接下来，介绍一下正确使用方法。

二、指令事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作

test.vue

<template>
  <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
    <el-dropdown @command="handleCommand">
      <i class="el-icon-user-solid" style="margin-right: 15px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="password">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      // 判断下拉菜单指令
      handleCommand(command) {
        // this.$message('click on item ' + command);
        if (command == "password"){
          this.changePassword()
        }else {
          this.logout()
        }
      },
      // 退出
      async logout() {
        this.$message("点击退出");
      },
      // 修改密码
      changePassword(){
        this.$message("点击修改密码");
      },
    }
  }
</script>

<style>
  .el-dropdown i{
    display: inline-block;
    position: relative;
    color: #606266;
    font-size: 30px;
  }
</style>

View Code

注意：在command中指定不同的指令，就可以做进一步的判断了。

访问测试页面，效果如下：