第二十二节进阶用户管理新增、编辑弹窗 表单校验本节目标实现新增用户弹窗、编辑用户弹窗复用同一个弹窗组件表单校验用户名必填、手机号格式校验等区分新增模式 / 编辑模式编辑回显原有数据mock 新增、修改接口提交后刷新列表配合v‑perm权限控制按钮显示文件src/views/system/user/index.vue在现有页面基础上扩展弹窗。步骤 1页面模板补充弹窗代码在 el‑table 后面增加 el‑dialog 弹窗template div classuser-container div classsearch-form el-input v-modelqueryParams.username placeholder请输入用户名 stylewidth:220px/el-input el-button typeprimary clickgetUserList查询/el-button el-button clickresetQuery重置/el-button /div div classbtn-group stylemargin:12px 0 el-button typeprimary v-permsystem:user:add clickopenAddDialog新增用户/el-button el-button typedanger v-permsystem:user:remove clickhandleBatchDelete批量删除/el-button /div el-table :datatableData border selection-changehandleSelectionChange el-table-column typeselection width55 / el-table-column propid labelID width80/ el-table-column propusername label用户名/ el-table-column propnickName label昵称/ el-table-column propphone label手机号/ el-table-column label操作 width180 template #defaultscope el-button link typeprimary v-permsystem:user:edit clickopenEditDialog(scope.row)编辑/el-button el-button link typedanger v-permsystem:user:remove clickhandleSingleDelete(scope.row)删除/el-button /template /el-table-column /el-table el-pagination v-model:current-pagequeryParams.pageNum v-model:page-sizequeryParams.pageSize :totaltotal changegetUserList / !-- 新增/编辑弹窗 -- el-dialog v-modeldialogVisible :titleisEdit ? 编辑用户 : 新增用户 width520px closedialogClose !-- el-form表单绑定校验规则 -- el-form refuserFormRef :modeluserForm :rulesuserFormRules label-width90px !-- id编辑时才存在新增隐藏 -- el-form-item v-ifisEdit label用户ID propid el-input v-modeluserForm.id disabled / /el-form-item el-form-item label用户名 propusername el-input v-modeluserForm.username placeholder请输入用户名/el-input /el-form-item el-form-item label昵称 propnickName el-input v-modeluserForm.nickName placeholder请输入昵称/el-input /el-form-item el-form-item label手机号 propphone el-input v-modeluserForm.phone placeholder请输入手机号/el-input /el-form-item /el-form template #footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksubmitForm确定/el-button /template /el-dialog /div /template步骤 2script‑setup 完整逻辑script setup import { ref, reactive } from vue import { ElMessage, ElMessageBox } from element-plus import { getUserListApi, deleteUserApi, batchDeleteUserApi, addUserApi, updateUserApi } from /api/system/user const tableData ref([]) const total ref(0) // 批量删除选中 const multipleSelection ref([]) const queryParams reactive({ pageNum: 1, pageSize: 10, username: }) // --------弹窗相关状态-------- const dialogVisible ref(false) // true编辑模式 false新增模式 const isEdit ref(false) // 表单ref用于做表单校验 const userFormRef ref(null) // 表单数据 const userForm reactive({ id: null, username: , nickName: , phone: }) // ✅表单校验规则 const userFormRules { username: [ { required: true, message: 用户名不能为空, trigger: blur } ], nickName: [ { required: true, message: 昵称不能为空, trigger: blur } ], phone: [ { required: true, message: 手机号不能为空, trigger: blur }, { pattern: /^1[3-9]\d{9}$/, message: 手机号格式不正确, trigger: blur } ] } // 多选事件 const handleSelectionChange (val) { multipleSelection.value val } // 获取列表 const getUserList async () { const res await getUserListApi(queryParams) tableData.value res.data.records total.value res.data.total } // 单条删除 const handleSingleDelete (row) { ElMessageBox.confirm(确定删除该用户, 提示, { type: warning }).then(async () { await deleteUserApi(row.id) ElMessage.success(删除成功) getUserList() }) } // 批量删除 const handleBatchDelete () { if (!multipleSelection.value || multipleSelection.value.length 0) { ElMessage.warning(请先勾选要删除的数据) return } const idList multipleSelection.value.map(item item.id) ElMessageBox.confirm(确定删除选中 ${idList.length} 条记录该操作不可恢复, 警告, { type: danger }) .then(async () { await batchDeleteUserApi({ ids: idList }) ElMessage.success(批量删除成功) multipleSelection.value [] getUserList() }) } // 打开新增弹窗 const openAddDialog () { isEdit.value false dialogVisible.value true // 清空表单 resetForm() } // 打开编辑弹窗回显行数据 const openEditDialog (row) { isEdit.value true dialogVisible.value true // 把当前行赋值给表单 Object.assign(userForm, { ...row }) } // 重置表单、清空校验提示 const resetForm () { userForm.id null userForm.username userForm.nickName userForm.phone // 清除校验错误提示 userFormRef.value?.clearValidate() } // 弹窗关闭回调 const dialogClose () { resetForm() } // 提交表单 const submitForm async () { // 执行表单校验 await userFormRef.value.validate() if (isEdit.value) { // 编辑调用修改接口 await updateUserApi(userForm) ElMessage.success(修改用户成功) } else { // 新增调用新增接口 await addUserApi(userForm) ElMessage.success(新增用户成功) } // 关闭弹窗刷新列表 dialogVisible.value false getUserList() } // 查询重置 const resetQuery () { queryParams.username getUserList() } getUserList() /script步骤 3api/user.js 添加新增、修改接口import request from /utils/request // 获取用户列表 export function getUserListApi(params){ return request({url:/api/user/list,method:get,params}) } // 单条删除 export function deleteUserApi(id){ return request({url:/api/user/${id},method:delete}) } // 批量删除 export function batchDeleteUserApi(data){ return request({url:/api/user/batchRemove,method:delete,data}) } // ✅新增用户 export function addUserApi(data){ return request({url:/api/user/add,method:post,data}) } // ✅修改用户 export function updateUserApi(data){ return request({url:/api/user/update,method:put,data}) }步骤 4mock/index.js 添加新增、修改模拟接口// 新增用户 /api/user/add: ({ body }) { console.log(新增用户数据, body) return { code:200, msg:新增成功, data:null } }, // 修改用户 /api/user/update: ({ body }) { console.log(编辑用户数据, body) return { code:200, msg:修改成功, data:null } }✅测试清单点击【新增用户】弹窗打开表单清空标题显示新增用户不填内容直接点确定触发表单校验用户名、昵称、手机号提示不能为空手机号输入错误格式触发正则校验提示填写正确表单提交mock 接收参数提示新增成功列表刷新点击【编辑】弹窗回显当前行数据标题切换为编辑用户ID 字段禁用修改字段提交提示修改成功列表刷新关闭弹窗校验错误提示自动清除权限perms:[]新增、编辑按钮自动消失常见坑el‑form必须绑定refvalidate()才可以执行校验关闭弹窗调用clearValidate()清除红色报错编辑模式使用Object.assign拷贝行数据不要直接赋值引用对象会导致表格数据实时篡改mock 环境下只是模拟返回不会真正持久保存刷新页面数据会复原。