The drop-down menu in elementui needs to be processed with multiple parameters

One, the effect to be achieved

Like this, I want to make too many menus into this kind of drop-down and clickable effect, but in the case provided on the official website, only one parameter of command can be passed in:

<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>

Second, the solution

Bind the command of each item with an attribute to dynamically pass in the value. And this value is an object. Inside, we can configure the parameters we want:

Three, the specific code:

        <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
      }
    }