Vue3 + MybatisPlus實現(xiàn)批量刪除功能(詳細(xì)代碼)
更新時間：2024年03月02日 11:11:05 作者：編程抗氧化
這篇文章主要介紹了Vue3 + MybatisPlus實現(xiàn)批量刪除功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
一、后端
1.1 編寫后端接口
@PostMapping("/batchDelete")
public CommonResult<Boolean> batchDeleteYuzws(@RequestBody List<Long> ids) {
yuzwsService.batchDelete(ids);
return success(true);
}1.2 編寫service和其實現(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 實現(xiàn)多選調(diào)用的方法
const selectedIds = ref<number[]>([]) // 表格的選中 ID 數(shù)組
/** 表格選中事件 */
/** YuzwsVO是我的實體類 當(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時，按鈕禁用，只有選擇了多選框，才會取消禁用。
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實現(xiàn)批量刪除功能的文章就介紹到這了,更多相關(guān)MybatisPlus批量刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue3.2中setup語法糖<script?lang="ts"?setup>
Vue 3.2 引入了語法,這是一種稍微不那么冗長的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語法糖<script?lang="ts"setup>的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vueCl如何 查看打包后文件的大小占比問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue路由對象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue3中展示markdown格式文章的三種形式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
談一談vue請求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請求數(shù)據(jù)放在created好還是mounted里好的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue-cli 構(gòu)建骨架屏的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue表單驗證rules及validator驗證器的使用方法實例
在vue開發(fā)中,難免遇到各種表單校驗,下面這篇文章主要給大家介紹了關(guān)于vue表單驗證rules及validator驗證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue數(shù)組動態(tài)刷新失敗問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue中使用iframe踩坑問題記錄 iframe+postMessage
這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09