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

本文介绍一个使用 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;
}

样式清爽、结构明确，便于组件复用和样式统一。