当前位置：首页 > web >正文

Vue3 + Element Plus 实现用户管理模块

web 2025/7/28 12:56:17

本文介绍一个使用 Vue3 + Element Plus 实现的用户与小组管理模块，支持用户的增删改查（CRUD）和分页管理，以及小组的新增和删除功能，适用于管理后台系统中的用户权限管理场景。

一、项目简介

该模块具备以下功能：

用户信息展示（用户名、姓名、所属小组、角色）
用户新增、编辑、删除
小组新增、删除管理
分页支持
弹窗式表单对话框设计

二、效果图展示

以下为模块实际界面截图：

用户列表页效果图
新增/编辑弹窗效果图

提示：以上截图请替换为项目实际 UI 效果图，可展示页面布局与交互样式。

三、核心逻辑（JavaScript 部分）

用户数据通过接口异步获取，分页参数传入后台，返回记录与总数。

const fetchUserList = async () => {const response = await queryUserPages({currentPage: pagination.value.currentPage,pageSize: pagination.value.pageSize});userList.value = response.data.records;pagination.value.total = response.data.total;
};

表单提交支持区分新增与编辑场景：

const handleSubmit = async (formData) => {dialogVisible.value = false;if (currentUser.value) {await updateUser(formData);} else {await addUser(formData);}fetchUserList();
};

支持用户删除操作，删除前通过消息框确认：

const confirmDeleteUser = (user) => {ElMessageBox.confirm(`确定要删除用户 "${user.userName}" 吗？`, '删除确认', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {deleteUser(user.uuid);});
};const deleteUser = async (userId) => {await deleteUserById({ uuid: userId });fetchUserList();
};

四、小组管理功能

小组弹窗支持新增与删除操作。

新增小组逻辑如下：

const handleAdd = async () => {if (!form.branchname) {ElMessage.warning('请输入小组名称');return;}const response = await request({url: '/role/addBranch',method: 'post',data: form});if (response.code === 200) {ElMessage.success('小组添加成功');resetForm();emit('refresh');}
};

删除小组逻辑如下：

const handleDelete = (id) => {ElMessageBox.confirm('确定要删除这个小组吗?', '警告', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(async () => {await request({url: '/role/deleteBranchById',method: 'post',data: { uuid: id }});emit('refresh');});
};

五、样式说明

主要样式逻辑如下：

.box-card：布局容器，使用 Flex 垂直布局
.card-header：顶部区域，用于标题与按钮排列
.pagination-container：分页器底部区域，右对齐展示

.box-card {height: 100%;display: flex;flex-direction: column;overflow: auto;
}.card-header {display: flex;justify-content: space-between;align-items: center;padding: 0 10px;flex-shrink: 0;
}.user-table {flex: 1 1 auto;overflow: hidden;
}.pagination-container {padding: 10px 0;display: flex;justify-content: flex-end;background-color: #fff;flex-shrink: 0;
}
:deep(.el-card__body){height: calc(100% - 120px);padding: 20px 20px 0px 20px;
}