elementUI中el-dropdown的command实现传递多个参数
在Element UI的el-dropdown
组件中,你可以使用command
事件来处理下拉菜单项的点击事件。为了传递多个参数,你可以将它们放在一个数组或者对象中,然后在事件处理函数中解析这个数组或对象。
以下是一个简单的例子,演示如何传递多个参数:
<template>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
下拉菜单触发按钮<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="[1, '参数1', '参数2']">黄金糕</el-dropdown-item>
<el-dropdown-item :command="[2, '参数3', '参数4']">狮子头</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
methods: {
handleCommand(command) {
const [id, param1, param2] = command;
console.log(`点击了菜单项,ID: ${id}, 参数1: ${param1}, 参数2: ${param2}`);
}
}
};
</script>
在这个例子中,每个el-dropdown-item
通过command
属性绑定了一个数组,包含了多个参数。当用户点击下拉菜单项时,handleCommand
方法会被调用,并接收到这个数组作为参数。然后你可以解构这个数组,获取你需要的参数。
评论已关闭