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

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

 

图1 两种按钮效果

 

 

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

 

图2 ElementUi官方文档中el-dropdown的样例

 

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

放出代码：

<el-table-column label="操做1">
    <template slot-scope="scope">
        <el-dropdown split-button type="primary" @command="handleCommand">
            其余操做
            <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">编辑</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">删除</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">分配角色</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

由于咱们是写在表格里的，因此须要一个插槽，具体的根据实际状况进行修改。给<el-dropdown-item>标签的command属性绑定一个方法，这个方法就能够传入咱们想要的参数，而后利用这个方法封装成一个对象，再将这个对象传入handleCommand方法。

<script>
export default {
    methods: {
        handleEdit(index, row) {
           //todo
        },

        deleteUser(index, row) {
            //todo
        },

        assignRole(index, row){
           //todo   
        },

        beforeHandleCommand(index, row,command){
            return {
                'index': index,
                'row': row,
                'command':command
            }
        },
        handleCommand(command) {
            switch (command.command) {
                case "a"://编辑
                    this.handleEdit(command.index,command.row);
                    break;
                case "b"://删除
                    this.deleteUser(command.index,command.row);
                    break;
                case "c"://分配角色
                    this.assignRole(command.index,command.row);
                    break;
            }
        }
    },
}
</script>    

　　至于匹配command选了哪一个，用switch语句效率就会比较高了。