Vue+springboot批量刪除功能實(shí)現(xiàn)代碼

vue前臺(tái)
<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('請(qǐng)選擇要?jiǎng)h除的數(shù)據(jù)')
return
}
ElMessageBox.confirm('刪除數(shù)據(jù)后無(wú)法恢復(fù),您確認(rèn)刪除嗎?', '刪除確認(rèn)', {type: 'warning'}).then(() => {
request.request({
ids:data.multipleSelection.map(item => item.id),
url: '/ssCompany/delBatch?ids=' + ids.join(','), // 使用逗號(hào)分隔的 ID 字符串作為參數(shù)
method: 'DELETE',
}).then(res => {
if (res.code === '200') {
// 重新獲取數(shù)據(jù)的過(guò)程(load() 方法的調(diào)用)應(yīng)該在刪除成功后執(zhí)行
ElMessage.success("操作成功")
load() // 重新獲取數(shù)據(jù)
} else {
ElMessage.error(res.msg)
}
}).catch(err => {
// 添加錯(cuò)誤處理邏輯
ElMessage.error('刪除時(shí)發(fā)生錯(cuò)誤: ' + err.message)
})
}).catch(() => {
// 處理取消操作的邏輯
ElMessage.info('取消操作')
})
}后臺(tái)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 詳解springboot?springsecuroty中的注銷(xiāo)和權(quán)限控制問(wèn)題
- SpringBoot使用Spring Security實(shí)現(xiàn)登錄注銷(xiāo)功能
- SpringBoot--- SpringSecurity進(jìn)行注銷(xiāo)權(quán)限控制的配置方法
- springboot和vue前后端交互的實(shí)現(xiàn)示例
- SpringBoot3結(jié)合Vue3實(shí)現(xiàn)用戶登錄功能
- 基于SpringBoot和Vue3的博客平臺(tái)的用戶注冊(cè)與登錄功能實(shí)現(xiàn)
- SpringBoot和Vue.js實(shí)現(xiàn)的前后端分離的用戶權(quán)限管理系統(tǒng)
- 詳解SpringBoot項(xiàng)目整合Vue做一個(gè)完整的用戶注冊(cè)功能
- Vue結(jié)合Springboot實(shí)現(xiàn)用戶列表單頁(yè)面(前后端分離)
- vue+springboot用戶注銷(xiāo)功能實(shí)現(xiàn)代碼
相關(guān)文章
TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite
Vue3的確可以直接使用tsx開(kāi)發(fā),唯一需要處理的就是children,而且處理起來(lái)還是比較不爽的,下面這篇文章主要給大家介紹了關(guān)于TSX常見(jiàn)簡(jiǎn)單入門(mén)用法之Vue3+Vite的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue路由第二次進(jìn)入頁(yè)面created和mounted不執(zhí)行問(wèn)題及解決
這篇文章主要介紹了vue路由第二次進(jìn)入頁(yè)面created和mounted不執(zhí)行問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
Vue使用Echarts實(shí)現(xiàn)大屏可視化布局示例詳細(xì)講解
這篇文章主要介紹了Vue使用Echarts實(shí)現(xiàn)大屏可視化布局示例,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
手把手帶你封裝一個(gè)vue component第三方庫(kù)
這篇文章主要介紹了手把手帶你封裝一個(gè)vue component第三方庫(kù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的方法
觸底時(shí),繼續(xù)向后端發(fā)請(qǐng)求獲取下一頁(yè)的數(shù)據(jù),請(qǐng)求回來(lái)的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08
vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue簡(jiǎn)單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值的相關(guān)資料,需要的朋友可以參考下2019-09-09

