ElementUI Dropdown 下拉菜单

发布时间:2021-03-04 14:04:23编辑:admin阅读(325)

    一、概述

    在后台项目中,使用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中指定不同的指令,就可以做进一步的判断了。

     

    访问测试页面,效果如下:

    1.gif

     

     

    本文参考链接:

    https://element.eleme.io/#/zh-CN/component/dropdown


关键字