Vue+springboot批量删除功能实现代码
作者:檀玥
这篇文章主要介绍了Vue+springboot批量删除功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
vue前台
<div style="margin-bottom: 10px"> <el-button type="primary" plain @click="handleAdd">新增</el-button> <el-button @click="delBatch" type="danger" plain style="margin-left: 5px">批量删除</el-button> </div>
<el-table :data="data.tableData" style="width:100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"></el-table-column> </el-table>
js
// 选择数据 const handleSelectionChange = (val) => { data.multipleSelection = val; } //批量删除 const delBatch = () => { const ids = data.multipleSelection.map(item => item.id) if (data.multipleSelection.length === 0) { ElMessage.warning('请选择要删除的数据') return } ElMessageBox.confirm('删除数据后无法恢复,您确认删除吗?', '删除确认', {type: 'warning'}).then(() => { request.request({ ids:data.multipleSelection.map(item => item.id), url: '/ssCompany/delBatch?ids=' + ids.join(','), // 使用逗号分隔的 ID 字符串作为参数 method: 'DELETE', }).then(res => { if (res.code === '200') { // 重新获取数据的过程(load() 方法的调用)应该在删除成功后执行 ElMessage.success("操作成功") load() // 重新获取数据 } else { ElMessage.error(res.msg) } }).catch(err => { // 添加错误处理逻辑 ElMessage.error('删除时发生错误: ' + err.message) }) }).catch(() => { // 处理取消操作的逻辑 ElMessage.info('取消操作') }) }
后台springboot
controller
/** * 批量删除 */ @DeleteMapping("/delBatch") public Result delBatch(@RequestParam List<Integer> ids){ for (Integer id : ids) { scManagerService.deleteById(id); } return Result.success(); }
mapper
//批量删除 @Delete("DELETE FROM sc_manager WHERE id IN (#{id})") void deleteByIds(String id);
service
//批量删除 public void delBatch(List<Integer> ids) { scManagerMapper.delBatch(ids); }
到此这篇关于Vue+springboot的批量删除功能的文章就介绍到这了,更多相关Vue springboot批量删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- 详解springboot springsecuroty中的注销和权限控制问题
- SpringBoot使用Spring Security实现登录注销功能
- SpringBoot--- SpringSecurity进行注销权限控制的配置方法
- springboot和vue前后端交互的实现示例
- SpringBoot3结合Vue3实现用户登录功能
- 基于SpringBoot和Vue3的博客平台的用户注册与登录功能实现
- SpringBoot和Vue.js实现的前后端分离的用户权限管理系统
- 详解SpringBoot项目整合Vue做一个完整的用户注册功能
- Vue结合Springboot实现用户列表单页面(前后端分离)
- vue+springboot用户注销功能实现代码