ElementUI Dropdown 下拉菜单

Bertha 。 2022-10-31 01:35 541阅读 0赞

# 一、概述 #

在后台项目中，使用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>

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

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

![f7b1ced6ebc29c12ab7fe5a533b21cd5.gif][]

本文参考链接：

[https://element.eleme.io/\#/zh-CN/component/dropdown][https_element.eleme.io_zh-CN_component_dropdown]

[f7b1ced6ebc29c12ab7fe5a533b21cd5.gif]: /images/20221024/e0e8abb6fe14477281b0c2dbcb18a0ac.png
[https_element.eleme.io_zh-CN_component_dropdown]: https://element.eleme.io/#/zh-CN/component/dropdown