Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能(詳細(xì)代碼)
更新時(shí)間：2024年03月02日 11:11:05 作者：編程抗氧化
這篇文章主要介紹了Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
一、后端
1.1 編寫后端接口
@PostMapping("/batchDelete")
public CommonResult<Boolean> batchDeleteYuzws(@RequestBody List<Long> ids) {
yuzwsService.batchDelete(ids);
return success(true);
}1.2 編寫service和其實(shí)現(xiàn)類
/** * 批量刪除 * @param ids */ void batchDelete(List<Long> ids);
@Override
public void batchDelete(List<Long> ids) {
yuzwsMapper.deleteBatchIds(ids); // mybatisplus自帶批量刪除的方法
}二、前端
注意：這里我用的組件工具是elementplus，用法跟elementui幾乎一樣。
2.1 <el-table>組件加多選樣式
2.2 實(shí)現(xiàn)多選調(diào)用的方法
const selectedIds = ref<number[]>([]) // 表格的選中 ID 數(shù)組
/** 表格選中事件 */
/** YuzwsVO是我的實(shí)體類 當(dāng)多選時(shí)，自動(dòng)將id放入selectedIds中*/
const handleSelectionChange = (rows: YuzwsVO[]) => {
selectedIds.value = rows.map((row) => row.id)
}2.3 編寫批量刪除的按鈕
<el-button type="danger" plain @click="batchDelete" v-hasPermi="['system:yuzws:delete']" :disabled="selectedIds.length === 0" > <Icon icon="fa-trash" class="mr-5px" /> 刪除 </el-button>
這樣當(dāng)selectedIds的值為0時(shí)，按鈕禁用，只有選擇了多選框，才會(huì)取消禁用。
2.4 執(zhí)行批量刪除請求代碼
/** 批量刪除操作 */
const batchDelete = async () => {
try {
// 刪除的二次確認(rèn)
await message.delConfirm()
// 發(fā)起刪除
await YuzwsApi.batchDeleteYuzws(selectedIds.value)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}// 批量刪除
batchDeleteYuzws: async (data: any) => {
return await request.post({ url: `/system/yuzws/batchDelete`, data })
},到此這篇關(guān)于Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能的文章就介紹到這了,更多相關(guān)MybatisPlus批量刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue計(jì)算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法
這篇文章主要介紹了Vue中使用a標(biāo)簽下載靜態(tài)資源文件(如excel、pdf等)純前端操作方法的相關(guān)資料,需要的朋友可以參考下2025-02-02
vue使用advanced-mark.js實(shí)現(xiàn)高亮文字效果
在日常項(xiàng)目中我們往往會(huì)有搜索高亮的需求,下面這篇文章主要介紹了vue使用advanced-mark.js實(shí)現(xiàn)高亮文字效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
詳解mpvue實(shí)現(xiàn)對蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實(shí)現(xiàn)對蘋果X安全區(qū)域的適配，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
基于Vue3和SpringBoot實(shí)現(xiàn)Web實(shí)時(shí)消息推送功能
這篇文章主要介紹了WebSocket實(shí)現(xiàn)實(shí)時(shí)通信,對比HTTP低效,通過SpringBoot+Vue整合實(shí)現(xiàn)消息推送,涵蓋聊天、股票等場景,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2025-05-05
這篇文章主要給大家介紹了關(guān)于Vue3中ref的用法舉例總結(jié)的相關(guān)資料,ref()接受一個(gè)內(nèi)部值,返回一個(gè)響應(yīng)式的可更改的ref對象,此對象只有一個(gè)指向其內(nèi)部值的屬性.value,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue中如何引入jest單元測試問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue3+TypeScript+vue-router的使用方法
本文詳細(xì)講解了vue3+TypeScript+vue-router的使用方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開發(fā)中經(jīng)常會(huì)遇到跨組件通信的場景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11