Vue+springboot批量刪除功能實現(xiàn)代碼
更新時間:2024年05月21日 12:03:55 作者:檀玥
這篇文章主要介紹了Vue+springboot批量刪除功能,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
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
// 選擇數(shù)據(jù) const handleSelectionChange = (val) => { data.multipleSelection = val; } //批量刪除 const delBatch = () => { const ids = data.multipleSelection.map(item => item.id) if (data.multipleSelection.length === 0) { ElMessage.warning('請選擇要刪除的數(shù)據(jù)') return } ElMessageBox.confirm('刪除數(shù)據(jù)后無法恢復(fù),您確認(rèn)刪除嗎?', '刪除確認(rèn)', {type: 'warning'}).then(() => { request.request({ ids:data.multipleSelection.map(item => item.id), url: '/ssCompany/delBatch?ids=' + ids.join(','), // 使用逗號分隔的 ID 字符串作為參數(shù) method: 'DELETE', }).then(res => { if (res.code === '200') { // 重新獲取數(shù)據(jù)的過程(load() 方法的調(diào)用)應(yīng)該在刪除成功后執(zhí)行 ElMessage.success("操作成功") load() // 重新獲取數(shù)據(jù) } else { ElMessage.error(res.msg) } }).catch(err => { // 添加錯誤處理邏輯 ElMessage.error('刪除時發(fā)生錯誤: ' + 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); }
到此這篇關(guān)于Vue+springboot的批量刪除功能的文章就介紹到這了,更多相關(guān)Vue springboot批量刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
- 詳解springboot?springsecuroty中的注銷和權(quán)限控制問題
- SpringBoot使用Spring Security實現(xiàn)登錄注銷功能
- SpringBoot--- SpringSecurity進(jìn)行注銷權(quán)限控制的配置方法
- springboot和vue前后端交互的實現(xiàn)示例
- SpringBoot3結(jié)合Vue3實現(xiàn)用戶登錄功能
- 基于SpringBoot和Vue3的博客平臺的用戶注冊與登錄功能實現(xiàn)
- SpringBoot和Vue.js實現(xiàn)的前后端分離的用戶權(quán)限管理系統(tǒng)
- 詳解SpringBoot項目整合Vue做一個完整的用戶注冊功能
- Vue結(jié)合Springboot實現(xiàn)用戶列表單頁面(前后端分離)
- vue+springboot用戶注銷功能實現(xiàn)代碼
相關(guān)文章
vue路由第二次進(jìn)入頁面created和mounted不執(zhí)行問題及解決
這篇文章主要介紹了vue路由第二次進(jìn)入頁面created和mounted不執(zhí)行問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12Vue使用Echarts實現(xiàn)大屏可視化布局示例詳細(xì)講解
這篇文章主要介紹了Vue使用Echarts實現(xiàn)大屏可視化布局示例,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的方法
觸底時,繼續(xù)向后端發(fā)請求獲取下一頁的數(shù)據(jù),請求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實現(xiàn)觸底加載請求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08