Dropdown Attributes
设置split-button属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true即可。
| split-button | 下拉触发元素呈现为按钮组 |
|---|---|
Dropdown Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| command | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
Dropdown Menu Item Attributes
定义command回调事件的参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| command | 指令 | string/number/object | — | — |
<template>
<el-dropdown trigger="click" split-button @click="manage(obj.id,'toManage')" @command="handleCommand">
<i class="el-icon-setting" style='margin-right:5px'></i>
管理
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeCommand(obj.id,'toEdit')">
<i class="el-icon-edit-outline"></i> 编辑
</el-dropdown-item>
<el-dropdown-item :command="beforeCommand(obj.id,'toDelete')">
<i class="el-icon-delete"></i> 删除
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
data() {
return {
obj: { id: '01', name: 'tom', age: '26' }
};
},
methods: {
beforeCommand(id, command) {
return {
id,
command
};
},
handleCommand(arg) {
const { id, command } = arg;
console.log(command);
console.log(id);
},
manage(id, command) {
console.log(command);
console.log(id);
}
}
};
</script>