本文介紹一個使用 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;
}樣式清爽、結構明確，便于組件復用和樣式統一。
)
