vue前台

<div style="margin-bottom: 10px"><el-button type="primary" plain @click="handleAdd">新增</el-button><el-button  @click="delBatch" type="danger" plain style="margin-left: 5px">批量删除</el-button></div>

        <el-table :data="data.tableData" style="width:100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"></el-table-column>
</el-table>

js

// 选择数据
const handleSelectionChange = (val) => {data.multipleSelection = val;
}
//批量删除
const delBatch = () => {const ids = data.multipleSelection.map(item => item.id)if (data.multipleSelection.length === 0) {ElMessage.warning('请选择要删除的数据')return}ElMessageBox.confirm('删除数据后无法恢复，您确认删除吗?', '删除确认', {type: 'warning'}).then(() => {request.request({ids:data.multipleSelection.map(item => item.id),url: '/ssCompany/delBatch?ids=' + ids.join(','), // 使用逗号分隔的 ID 字符串作为参数method: 'DELETE',}).then(res => {if (res.code === '200') {// 重新获取数据的过程（load() 方法的调用）应该在删除成功后执行ElMessage.success("操作成功")load()  // 重新获取数据} else {ElMessage.error(res.msg)}}).catch(err => {// 添加错误处理逻辑ElMessage.error('删除时发生错误: ' + err.message)})}).catch(() => {// 处理取消操作的逻辑ElMessage.info('取消操作')})
}

后台springboot

controller

  /*** 批量删除*/@DeleteMapping("/delBatch")public Result delBatch(@RequestParam List<Integer> ids){for (Integer id : ids) {scManagerService.deleteById(id);}return Result.success();}

mapper

    //批量删除@Delete("DELETE FROM sc_manager WHERE id IN (#{id})")void deleteByIds(String id);

service

 //批量删除public void delBatch(List<Integer> ids) {scManagerMapper.delBatch(ids);}