二十一节：进阶：用户列表批量删除功能

二十一节：进阶：用户列表批量删除功能

🎯本节目标

给用户管理表格增加多选框，勾选多条记录，实现批量删除；mock 补充批量删除接口；增加二次确认弹窗；和原有单条删除逻辑复用。

你截图里表格左侧就是多选框所在列，目前还没有实现。

步骤 1：修改用户列表页面src/views/system/user/index.vue

template 部分改动关键点

1. el‑table 增加@selection‑change多选事件
2. 表格第一列增加el‑table‑column type="selection"选择框
3. 页面上方增加【批量删除】按钮，带上v‑perm权限指令

<template> <div class="user-container"> <div class="search-form"> <el-input v-model="queryParams.username" placeholder="请输入用户名" style="width:220px"></el-input> <el-button type="primary" @click="getUserList">查询</el-button> <el-button @click="resetQuery">重置</el-button> </div> <div class="btn-group"> <el-button type="primary" v-perm="'system:user:add'" @click="openAddDialog">新增用户</el-button> <!-- ✅批量删除按钮，需要system:user:remove权限 --> <el-button type="danger" v-perm="'system:user:remove'" @click="handleBatchDelete">批量删除</el-button> </div> <!-- ✅表格增加selection多选 --> <el-table :data="tableData" border @selection-change="handleSelectionChange" > <!-- 多选框列，放在表格最左侧，对应截图红框位置 --> <el-table-column type="selection" width="55" /> <el-table-column prop="id" label="ID" width="80"/> <el-table-column prop="username" label="用户名"/> <el-table-column prop="nickName" label="昵称"/> <el-table-column prop="phone" label="手机号"/> <el-table-column label="操作" width="180"> <template #default="scope"> <el-button link type="primary" v-perm="'system:user:edit'" @click="openEditDialog(scope.row)">编辑</el-button> <el-button link type="danger" v-perm="'system:user:remove'" @click="handleSingleDelete(scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页组件 --> <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="getUserList" /> </div> </template>

script 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>

步骤 2：api 文件新增批量删除接口

src/api/system/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 })

步骤 3：mock/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 } }

✅测试流程

1. 保存全部文件，重启pnpm dev，登录 admin 账号
2. 用户列表表格最左侧出现多选复选框（就是截图红框位置）
3. 勾选多条用户，点击【批量删除】
4. 没有勾选直接点按钮，弹出提示：请先勾选要删除的数据
5. 弹出确认弹窗，确认后提示批量删除成功，刷新列表
6. mock 修改perms:[]，批量删除按钮会被 v‑perm 指令自动隐藏

❗常见踩坑

1. el‑table必须绑定@selection‑change，否则拿不到选中行
2. 批量删除传参是data:{ids:[...]}delete 请求用 body 传数组，不要用 params
3. 删除完成，一定要清空multipleSelection.value，否则复选框状态残留