目录

一、后端

1.1 编写后端接口

1.2 编写service和其实现类

二、前端

2.1 组件加多选样式

2.2 实现多选调用的方法

2.3 编写批量删除的按钮

2.4 执行批量删除请求代码

---

一、后端

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-buttontype="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 })
},