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