【vue】 如何使ElementUi中的el-dropdown传入多参数

一：如何使ElementUi中的el-dropdown传入多参数

这边因为业务的需求，觉得随着产品中心以后需要按钮的增多（图1操作栏的效果），这样会导致排版和按钮过于冗长的问题，用户体验不佳，于是想到利用el-dropdown做一个下拉按钮（图1操作1栏的效果)

>

二：官方文档的使用方法

但是ElementUi官方文档中的handleCommand方法只允许接入一个参数，这个参数用于触发你选择的是哪一个选项。而我们实际中还需要传入一个当前行数（如果和我一样，也是用table显示数据的话）的对象进去，后面要使用这个对象的某些字段传给后台进行一些增删改查的操作。

于是，我们必须在执行handleCommand方法之前，对这个command参数进行重新封装成一个对象，使其内部包含我们想要的数据方便后面调用。

三：table里使用

1.使用

 <el-table-column fixed="right" label="操作">
          <template v-slot="scope">
            <div class="table-tool">
              <el-dropdown @command="handleInfo">
                <span class="el-dropdown-link">
                  查看<i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,1)">调用总次数</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,2)">调用失败次数</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,3)">被限流次数</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>

2.修改入参

 beforeHandleCommand(index, row, command) {
      return {
        'index': index,
        'row': row,
        'command': command
      }
    },

3.回调到父组件

/** @function 弹框 @param type 1总数 2失败 3限流*/
    handleInfo(item) {
      this.$emit('handleInfo', item.row, item.command)
    }

,