需求

批量删除

分析

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

后端

post http://localhost:8888/student/batchDelete

• 步骤：

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

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

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

  • 接口

    public void batchDelete(List<String> ids);

• 实现类

    public void batchDelete(List<String> ids) {

        ids.forEach(id -> {

            studentMapper.deleteByPrimaryKey(id);

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

    @PostMapping("/batchDelete")

    public BaseResult batchDelete(@RequestBody List<String> ids) {

            studentService.batchDelete(ids);

            return BaseResult.ok("删除成功");

        } catch (Exception e) {

            e.printStackTrace();

            return BaseResult.error(e.getMessage());

• 测试

前端

• 步骤：

  • 步骤1：声明变量deleteIds:[]

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

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

• 步骤1：声明变量deleteIds:[]

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

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

    async batchDeleteStudent() {

      if(!confirm('您确定要删除么？')) {

      let {data:baseResult} = await axios.post('http://localhost:8888/student/batchDelete', this.deleteIds)

      if(baseResult.code == 20000) {

        // 3.1)成功 -- 重新查询

        this.condition(1)

        alert(baseResult.message)

删除

• 思路：

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

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

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

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

      this.deleteIds.push(sid)

      this.batchDeleteStudent()

      this.deleteIds = []

全选按钮

效果

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

• 全选选中，列表都选中

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

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

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

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

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

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

 

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

    allChecked(newValue,oldValue) {

      //如果是true将列表中的所有id添加到批量删除数组中，如果是false赋值空数组

        //this.deleteIds = this.pageInfo.list.map(student => {return student.sid})

        this.deleteIds = this.pageInfo.list.map(student => student.sid) //箭头函数的省略

        this.deleteIds = []

本文使用 文章同步助手 同步