首页 > 网络编程 > JavaScript > javascript类库 > vue.js > MybatisPlus批量删除

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

2024-03-02 11:11:06 作者：编程抗氧化

这篇文章主要介绍了Vue3 + MybatisPlus实现批量删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

一、后端

1.1 编写后端接口

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

1.2 编写service和其实现类

/**
 * 批量删除
 * @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 实现多选调用的方法

const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
/** 表格选中事件 */
/** 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 执行批量删除请求代码

/** 批量删除操作 */
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 })
},

到此这篇关于Vue3 + MybatisPlus实现批量删除功能的文章就介绍到这了,更多相关MybatisPlus批量删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！