目录
一、后端
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 })
},
