效果

image.png

左侧多按钮排列 右侧的下拉收纳。看项目需求和个人喜好吧。本问主要记录如何通过el-dropdown实现右侧的效果。

el-dropdown官方使用说明就不再赘述。ElementUi官方文档中的handleCommand方法只允许接入一个参数，这个参数触发选择的是哪一个选项。但是在实际中还需要传入的对象进去，后台使用这个对象的某些字段进行一些增删改查的操作。
所以必须在执行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>

<script>
export default {
    methods: {
        handleEdit(index, row) {
           // 实现编辑的逻辑
        },
        deleteUser(index, row) {
            // 实现删除的逻辑
        },
        assignRole(index, row){
           // 实现角色分配逻辑   
        },
       // 重新封装对象，加入参数
        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>

参考地址