element Dropdown 按钮组command自定义参数

3,061 阅读1分钟

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>