axios.get传数组之批量删除

最新推荐文章于 2023-09-12 20:19:19 发布

爱恰鸡米花

最新推荐文章于 2023-09-12 20:19:19 发布

阅读量1.3k

点赞数

分类专栏：学习文章标签： vue.js spring boot

本文链接：https://blog.csdn.net/weixin_44542401/article/details/117598945

版权

本文介绍了如何使用Vue.js结合axios.get方法实现前端批量删除功能，并通过Spring Boot后端的 IService.removeByIds 方法进行处理。前端利用Element UI的多选框获取选中ID，通过axios.get将ID数组传递给后端，后端使用Mybatis-Plus的removeByIds进行批量删除。

摘要由CSDN通过智能技术生成

axios.get传数组参考：https://www.zhihu.com/question/272032105
今天要做一个批量删除的功能，后台用的是springboot+mybatis-plus，因为service继承了IService类，我们就可以用它（IService）里面的removeByIds方法，这个方法是根据获取id的集合来进行批量删除的。而这个id的集合当然是前端给我们传过来的。废话不多说，上代码。

前端

前端我用的是element+vue.js，如下图要有这种多选框，可以参考官网
在这里插入图片描述

获取批量删除id的集合

 <el-table :data="tabledata" border style="width: 100%;margin-top: 10px"  @selection-change="handleSelectionChange">
 //@selection-change="handleSelectionChange"：当用户手动勾选全选 Checkbox 时触发的事件。就是勾选时触发的事件
 
 </el-table>

  data() {
   
   return {
   
    /*批量删除勾选的id集合*/
      multipleSelection: [],
   }
}
 /*获取批量删除id集合*/
    handleSelectionChange(val) {
   
     //遍历循环
     for (var i=0;i<val.length;i++