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

陶然同学

发布于 2023-02-27 09:58:45

1.5K0

发布于 2023-02-27 09:58:45

文章被收录于专栏：陶然同学博客

需求

批量删除

分析

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-27，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法