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

需求

批量删除

分析

• 前端提交数组（一组数据），后端采用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 = []
      }
    }
  },