elementui中下拉菜单需要传入多个参数的处理

一，要实现的效果

像这样，想要把太多的菜单，做成这种下拉展开可点击的效果，但是官网中提供的案例，只能传入command一个参数：

<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="a">黄金糕</el-dropdown-item>
    <el-dropdown-item command="b">狮子头</el-dropdown-item>
    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  }
</script>

二，解决办法

把每一项的command用属性绑定，来动态传入值。并且这个值是一个对象。里面就可以配置我们想要的参数了：

三，具体代码：

        <el-table-column label="操作" align="center" min-width="120" fixed="right">
          <template slot-scope="scope">
            <div class="operation">
              <el-link type="primary" @click="handleEdit(scope.row, scope.$index)">编辑</el-link>
              <el-dropdown trigger="click" @command="handleCommand" size="small">
                  <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="beforeHandleCommand(scope,'删除')">删除</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(scope,'角色绑定')">角色绑定</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(scope,'门店关联')">门店关联</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(scope,'修改密码')">修改密码</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>

handleCommand(command) {
      switch (command.command) {
        case "删除":
          this.handleDelete(command.scope)
          break;
        case "角色绑定":
          this.handleRole(command.scope.row)
          break;
        case "门店关联":
          this.handleBusiness(command.scope.row)
          break;
        default:
          this.handlePasswd(command.scope.row)
          break;
      }
    },
    beforeHandleCommand(scope,command){
      return {
        'scope':scope,
        'command':command
      }
    }