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);}