一、概述
在后台项目中，使用Dropdown 下拉菜单时，发现对el-dropdown-item绑定点击事件时，一直没有触发，比如：
代码语言：javascript复制<el-dropdown-item @click="password()">修改密码</el-dropdown-item>后来查阅官方文档，原来是使用方式不对。接下来，介绍一下正确使用方法。
二、指令事件
点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作
test.vue
代码语言：javascript复制<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中指定不同的指令，就可以做进一步的判断了。
访问测试页面，效果如下：
本文参考链接：
https://element.eleme.io/#/zh-CN/component/dropdown
