需求

批量删除

分析

• 前端提交数组（一组数据），后端采用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());
              }
  
 

• 测试

前端

• 步骤：

  • 步骤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)
            }
          },
  
 

删除

• 思路：

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

文章来源: blog.csdn.net，作者：陶然同学，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_45481821/article/details/123239406