Vue和MP实现批量删除的两种方式

最新推荐文章于 2025-05-19 19:23:37 发布

原创最新推荐文章于 2025-05-19 19:23:37 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mybatis #java #开发语言

本文介绍了一种Vue前端与Java后端结合实现批量删除功能的方法。通过两种方式实现：一是前端拼接字符串，后端解析；二是前端直接传递数组到后端。这两种方式各有优劣，文章详细阐述了其实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

批量删除往往是项目中不可缺少的功能，普通方式的实现无外乎两种方法：第一种前端进行拼接，后端再进行拆分。第二种利用循环完成。第一种比较麻烦，第二种效率不高。今天我们看一下Vue结合MP如何实现批量删除，先看第一种方式：数组

前端Vue关键代码：

let ids='?';
this.multipleSelection.forEach(item=>{
    ids += 'ids='+item.id+'&';
})

后端java代码：注意这里是@DeleteMapping

@DeleteMapping("/")
@ApiOperation("批量删除")
public Result<Boolean> batch_del(Integer[] ids){
    return this.userService.removeByIds(Arrays.asList(ids))
            ? Result.success()
            : Result.error(300, "删除失败！");
}

以上的这种方式我们需要在Vue端进行拼接（ids拼接后的内容是：?ids=1&ids=2&ids=3），后端利用Arrays.asList()转换为集合。

第二种方式：集合

前端Vue核心代码：

data(){
    return{
        ids:[]
    }
}
handleSelectionChange(val){
    this.multipleSelection=val;
    this.ids= val.map(m=>m.id);
}

后端java代码：注意这里是@PostMapping，且参数使用@RequestBody进行封装

 @PostMapping("/batch_del")
    @ApiOperation("批量删除")
    public Result<Boolean> batch_del(@RequestBody List<Integer> ids){
        return this.userService.removeByIds(ids)
                ? Result.success()
                : Result.error(300, "删除失败！");
    }