element-ui中下拉command传递多参数事件封装

问题产生

command事件中默认传递一个参数，即你每个下拉选项el-dropdown-item中设定的command的值，怎么样传递多个参数呢？

我的项目中el-dropdown在一个遍历循环中，需要将index角标将参数传给@command="handleCommand"事件中。

解决办法：

动态设置每个el-dropdown-item中command的值

效果图：

效果：下拉框选中后，el-dropdown-link显示选中的信息，并且弹一下消息，内容为选中的id。

vue

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {
   
   { dropdownName }}
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <div v-for="item in matchList">
      <el-dropdown-item :command="beforeHandleCommand(item.id,item.name)"> {
   
   { item.name }}</el-dropdown-item>
    </div>
  </el-dropdown-menu>
</el-dropdown>

js

<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        tableData: [{
    
    
          pk_id: 1,
          mname: '中国机设',
          mtype: '计算机',
          date: '2016-05-02',
          name: '燕山大学',
        }, {
    
    
          pk_id: 2,
          mname: '蓝桥杯',
          mtype: '计算机',
          date: '2016-05-02',
          name: '河北大学',
        }],
        dropdownName: "下拉菜单",
        matchList: [{
    
    
          id: 1,
          name: "燕山大学"
        }, {
    
    
          id: 2,
          name: "河北大学"
        }, ],
      }
    },
    methods: {
    
    
      handleCommand(command) {
    
    
        console.log(command);
        this.dropdownName=command.command;
        this.$message("id："+command.index);
      },

      beforeHandleCommand(index, command) {
    
     //index我这里是遍历的角标，即你需要传递的额外参数
        return {
    
    
          'index': index,
          'command': command
        }
      },

    }
  }
</script>