二十一节进阶用户列表批量删除功能本节目标给用户管理表格增加多选框勾选多条记录实现批量删除mock 补充批量删除接口增加二次确认弹窗和原有单条删除逻辑复用。你截图里表格左侧就是多选框所在列目前还没有实现。步骤 1修改用户列表页面src/views/system/user/index.vuetemplate 部分改动关键点el‑table 增加selection‑change多选事件表格第一列增加el‑table‑column typeselection选择框页面上方增加【批量删除】按钮带上v‑perm权限指令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 el-button typeprimary v-permsystem:user:add clickopenAddDialog新增用户/el-button !-- ✅批量删除按钮需要system:user:remove权限 -- el-button typedanger v-permsystem:user:remove clickhandleBatchDelete批量删除/el-button /div !-- ✅表格增加selection多选 -- 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 / /div /templatescript setup 新增逻辑script setup import { ref,reactive } from vue import { ElMessage, ElMessageBox } from element-plus import { getUserListApi,deleteUserApi } from /api/system/user const tableData ref([]) const total ref(0) // ✅保存勾选的多行选中数据 const multipleSelection ref([]) const queryParams reactive({ pageNum:1, pageSize:10, username: }) // 多选触发拿到选中行 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 } // 提取所有选中行id数组 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 resetQuery (){ queryParams.username getUserList() } getUserList() /script步骤 2api 文件新增批量删除接口src/api/system/user.jsimport 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 })步骤 3mock/index.js 补充批量删除模拟接口你现有的 mock 是对象格式追加一条/api/user/batchRemove/api/user/batchRemove: ({ body }) { // body拿到ids数组 [1,2,3] console.log(批量删除id集合,body.ids) return { code:200, msg:批量删除成功, data:null } }✅测试流程保存全部文件重启pnpm dev登录 admin 账号用户列表表格最左侧出现多选复选框就是截图红框位置勾选多条用户点击【批量删除】没有勾选直接点按钮弹出提示请先勾选要删除的数据弹出确认弹窗确认后提示批量删除成功刷新列表mock 修改perms:[]批量删除按钮会被 v‑perm 指令自动隐藏❗常见踩坑el‑table必须绑定selection‑change否则拿不到选中行批量删除传参是data:{ids:[...]}delete 请求用 body 传数组不要用 params删除完成一定要清空multipleSelection.value否则复选框状态残留