wordpress主题制作 工具网站的内部优化公司
本文介绍一个使用 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;
}样式清爽、结构明确，便于组件复用和样式统一。