elementuiのドロップダウンメニューは、複数のパラメーターで処理する必要があります

一つは、達成すべき効果

このように、このようなドロップダウンとクリック可能な効果にあまりにも多くのメニューを作りたいのですが、公式Webサイトで提供されている場合、コマンドの1つのパラメーターのみを渡すことができます。

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

第二に、解決策

各アイテムのコマンドを属性にバインドして、値を動的に渡します。そして、この値はオブジェクトです。内部では、必要なパラメーターを構成できます。

3、特定のコード：

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