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

批量删除往往是项目中不可缺少的功能，普通方式的实现无外乎两种方法：第一种前端进行拼接，后端再进行拆分。第二种利用循环完成。第一种比较麻烦，第二种效率不高。今天我们看一下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, "删除失败！");
    }