Vue.js入门到精通|最常见的需求基于Vue的批量删除你会嘛 Vue.js入门到精通|vue.js

需求
文章图片

批量删除分析

前端提交数组（一组数据），后端采用List接收，并遍历依次删除

后端

post http://localhost:8888/student/batchDelete ['s001','s002']

步骤：
- 步骤1：编写service，获得所有id，遍历依次删除（拼条件 where sid in ('s001','s002')）
- 步骤2：编写controller，使用List接收json数组

步骤1：编写service，获得所有id，遍历依次删除（拼条件 where sid in ('s001','s002')）
- 接口

/** * 批量删除 * @param ids * @return */ public void batchDelete(List ids);

实现类

@Override public void batchDelete(List ids) { // 遍历，依次删除 ids.forEach(id -> { studentMapper.deleteByPrimaryKey(id); }); }

步骤2：编写controller，使用List接收json数组

/** * 批量删除 * @param ids * @return */ @PostMapping("/batchDelete") public BaseResult batchDelete(@RequestBody List ids) { try { // 删除 studentService.batchDelete(ids); // 提示 return BaseResult.ok("删除成功"); } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); }

测试

文章图片

前端

步骤：
- 步骤1：声明变量deleteIds:[]
- 步骤2：变量与复选框绑定
- 步骤3：点击按钮进行删除
步骤1：声明变量deleteIds:[]

文章图片

步骤2：变量与复选框绑定

文章图片

步骤3：点击按钮进行删除

文章图片

// 8.3.2 批量删除函数 async batchDeleteStudent() { // 1)询问 if(!confirm('您确定要删除么？')) { return; } // 2)ajax let {data:baseResult} = await axios.post('http://localhost:8888/student/batchDelete', this.deleteIds) // 3)提示 if(baseResult.code == 20000) { // 3.1)成功 -- 重新查询 this.condition(1) } else { // 3.2)失败 alert(baseResult.message) } },

删除

【Vue.js入门到精通|最常见的需求基于Vue的批量删除你会嘛】思路：
- 步骤1：将需要删除的sid，添加到批量删除的变量数组中
- 步骤2：调用批量删除的功能

步骤1：将需要删除的sid，添加到批量删除的变量数组中

文章图片

步骤2：调用批量删除的功能

文章图片

deleteStudent(sid) { // 将sid添加到批量删除的数组中 this.deleteIds.push(sid) // 调用批量删除 this.batchDeleteStudent() // 清空数据 this.deleteIds = [] }

全选按钮效果效果1：全选按钮，控制列表项

全选选中，列表都选中

文章图片

全选不选中，列表都不选中

文章图片

步骤2：列表项，控制全选按钮

最后一个列表选中了，全选要选中

文章图片

任意一个列表不选中，全选不选中

文章图片

效果1：全选按钮，控制列表项

步骤1：变量 allChecked，并绑定到全选按钮上

文章图片

步骤2：vue监听机制 watch。如果是true将列表中的所有id添加到批量删除数组中，如果是false赋值空数组

watch: { allChecked(newValue,oldValue) { //如果是true将列表中的所有id添加到批量删除数组中，如果是false赋值空数组 if(newValue) { // 全选 //this.deleteIds = this.pageInfo.list.map(student => {return student.sid}) this.deleteIds = this.pageInfo.list.map(student => student.sid) //箭头函数的省略 } else { // 全不选 this.deleteIds = [] } } },