!18 解决页面操作按钮繁多时的用户体验问题

Merge pull request !18 from 幕羽/feature/muyu
This commit is contained in:
芋道源码 2021-03-13 19:41:23 +08:00 committed by Gitee
commit 82b73994cb

View File

@ -142,34 +142,41 @@
>
<template slot-scope="scope">
<el-button
size="mini"
size="large"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']"
v-hasPermi="['system:role:edit']"
>修改</el-button>
<el-button
<el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)">
<span class="el-dropdown-link">
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
command="handleDelete"
v-if="scope.row.id !== 1"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:user:remove']"
>删除</el-button>
<el-button
>删除</el-dropdown-item>
<el-dropdown-item
command="handleResetPwd"
size="mini"
type="text"
icon="el-icon-key"
@click="handleResetPwd(scope.row)"
v-hasPermi="['system:user:resetPwd']"
>重置</el-button>
<el-button
>重置</el-dropdown-item>
<el-dropdown-item
command="handleRole"
size="mini"
type="text"
icon="el-icon-circle-check"
@click="handleRole(scope.row)"
v-hasPermi="['system:permission:assign-user-role']"
>分配角色</el-button>
>分配角色</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
@ -452,6 +459,25 @@ export default {
});
},
methods: {
//
handleCommand(command, index, row) {
switch (command) {
case 'handleUpdate':
this.handleUpdate(row);//
break;
case 'handleDelete':
this.handleDelete(row);//
break;
case 'handleResetPwd':
this.handleResetPwd(row);
break;
case 'handleRole':
this.handleRole(row);
break;
default:
break;
}
},
/** 查询用户列表 */
getList() {
this.loading = true;
@ -713,3 +739,13 @@ export default {
}
};
</script>
<style>
.el-dropdown-link {
cursor: pointer;
color: #1890ff;
margin-left: 5px;
}
.el-icon-arrow-down {
font-size: 14px;
}
</style>