Vue3 + MybatisPlus實現(xiàn)批量刪除功能(詳細代碼)

更新時間：2024年03月02日 11:11:05 作者：編程抗氧化

這篇文章主要介紹了Vue3 + MybatisPlus實現(xiàn)批量刪除功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、后端

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)多選調用的方法

const selectedIds = ref<number[]>([]) // 表格的選中 ID 數(shù)組
/** 表格選中事件 */
/** YuzwsVO是我的實體類 當多選時，自動將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>

這樣當selectedIds的值為0時，按鈕禁用，只有選擇了多選框，才會取消禁用。

2.4 執(zhí)行批量刪除請求代碼

/** 批量刪除操作 */
const batchDelete = async () => {
    try {
        // 刪除的二次確認
        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 })
},

到此這篇關于Vue3 + MybatisPlus實現(xiàn)批量刪除功能的文章就介紹到這了,更多相關MybatisPlus批量刪除內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解vue3.2中setup語法糖<script?lang="ts"?setup>
Vue 3.2 引入了語法,這是一種稍微不那么冗長的聲明組件的方式,下面這篇文章主要介紹了詳解vue3.2中setup語法糖<script?lang="ts"setup>的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-01-01
vueCl如何查看打包后文件的大小占比
這篇文章主要介紹了vueCl如何查看打包后文件的大小占比問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue路由對象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue3中展示markdown格式文章的三種形式
這篇文章主要為大家詳細介紹了vue3中展示markdown格式文章的三種形式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-04-04
談一談vue請求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請求數(shù)據(jù)放在created好還是mounted里好的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue-cli 構建骨架屏的方法示例
這篇文章主要介紹了vue-cli 構建骨架屏的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
vue表單驗證rules及validator驗證器的使用方法實例
在vue開發(fā)中,難免遇到各種表單校驗,下面這篇文章主要給大家介紹了關于vue表單驗證rules及validator驗證器使用的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
vue數(shù)組動態(tài)刷新失敗問題及解決
這篇文章主要介紹了vue數(shù)組動態(tài)刷新失敗問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
Vue中使用iframe踩坑問題記錄 iframe+postMessage
這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09