Vue3 + MybatisPlus实现批量删除功能(详细代码)

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

/**
 * 批量删除
 * @param ids
 */
void batchDelete(List<Long> ids);

@Override
public void batchDelete(List<Long> ids) {
	yuzwsMapper.deleteBatchIds(ids); // mybatisplus自带批量删除的方法
}

const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
/** 表格选中事件 */
/** YuzwsVO是我的实体类 当多选时，自动将id放入selectedIds中*/
const handleSelectionChange = (rows: YuzwsVO[]) => {
    selectedIds.value = rows.map((row) => row.id)
}

<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>

/** 批量删除操作 */
const batchDelete = async () => {
    try {
        // 删除的二次确认
        await message.delConfirm()
        // 发起删除
        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 })
},