快捷導(dǎo)航

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

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

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

一、后端

1.1 編寫(xiě)后端接口

@PostMapping("/batchDelete")
public CommonResult<Boolean> batchDeleteYuzws(@RequestBody List<Long> ids) {
	yuzwsService.batchDelete(ids);
	return success(true);
}

1.2 編寫(xiě)service和其實(shí)現(xiàn)類(lèi)

/**
 * 批量刪除
 * @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í)體類(lèi) 當(dāng)多選時(shí)，自動(dòng)將id放入selectedIds中*/
const handleSelectionChange = (rows: YuzwsVO[]) => {
    selectedIds.value = rows.map((row) => row.id)
}

2.3 編寫(xiě)批量刪除的按鈕

<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í)行批量刪除請(qǐng)求代碼

/** 批量刪除操作 */
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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