0
点赞
收藏
分享

微信扫一扫

最常见的需求基于Vue的批量删除你会嘛


需求

最常见的需求基于Vue的批量删除你会嘛_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<String> ids);

  • 实现类

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

步骤2:编写controller,使用List接收json数组

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

  • 测试

最常见的需求基于Vue的批量删除你会嘛_复选框_02

前端

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

最常见的需求基于Vue的批量删除你会嘛_数组_03

  • 步骤2:变量与复选框绑定

最常见的需求基于Vue的批量删除你会嘛_复选框_04

  • 步骤3:点击按钮进行删除

最常见的需求基于Vue的批量删除你会嘛_批量删除_05

    // 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)
}
},

删除

  • 思路:
  • 步骤1:将需要删除的sid,添加到批量删除的变量数组中
  • 步骤2:调用批量删除的功能
  • 步骤1:将需要删除的sid,添加到批量删除的变量数组中

最常见的需求基于Vue的批量删除你会嘛_批量删除_06

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

最常见的需求基于Vue的批量删除你会嘛_vue.js_07

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

全选按钮

效果

效果1:全选按钮,控制列表项

  • 全选选中,列表都选中

最常见的需求基于Vue的批量删除你会嘛_批量删除_08

  • 全选不选中,列表都不选中

最常见的需求基于Vue的批量删除你会嘛_数组_09

步骤2:列表项,控制全选按钮

  • 最后一个列表选中了,全选要选中

最常见的需求基于Vue的批量删除你会嘛_批量删除_10

  • 任意一个列表不选中,全选不选中

最常见的需求基于Vue的批量删除你会嘛_批量删除_11

效果1:全选按钮,控制列表项

  • 步骤1:变量 allChecked,并绑定到全选按钮上

最常见的需求基于Vue的批量删除你会嘛_vue.js_12

 

步骤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 = []
}
}
},

举报

相关推荐

0 条评论