我要评论
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批量删除内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论