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

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

🎯本节目标

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

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

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

template 部分改动关键点

1. el‑table 增加 @selection‑change 多选事件

2. 表格第一列增加 el‑table‑column type="selection" 选择框

3. 页面上方增加【批量删除】按钮，带上v‑perm权限指令

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，否则复选框状态残留