批量删除讲师前后端实现

约定不等于承诺〃 2021-07-24 17:37 482阅读 0赞

# 一 后端实现 #

/**
    * 功能描述：根据ID列表删除讲师
    *
    * @param idList 讲师ID列表
    * @return R 返回给前端的数据
    * @author cakin
    * @date 2020/11/28
    */
    @ApiOperation(value = "根据ID列表删除讲师")
    @DeleteMapping("batch-remove")
    public R removeRows(@ApiParam(value = "讲师ID列表", required = true) @RequestBody List<String> idList) {
        boolean result = teacherService.removeByIds(idList);
        if (result) {
            return R.ok().message("删除成功");
        } else {
            return R.error().message("数据不存在");
        }
    }

# 二 前端实现 #

## 1 api ##

// 批量删除讲师
      batchRemove(idList) {
        return request({
          url: '/admin/edu/teacher/batch-remove',
          method: 'delete',
          data: idList
        })
      },

## 2 添加删除复选框 ##

<el-table :data="list" border stripe>
          
          <el-table-column type="selection" />

## 3 添加删除按钮 ##

<div style="margin-bottom: 10px;">
          <el-button type="danger" size="mini" @click="batchRemove()">批量删除</el-button>
        </div>

## 4 data中定义数据 ##

multipleSelection: [] // 批量选中的记录列表

## 5 表格组件中添加选择事件 ##

<el-table
          :data="list"
          border
          stripe
          @selection-change="handleSelectionChange">

## 6 定义事件的回调函数 ##

// 当表格中多选项发生变化的时候触发
        handleSelectionChange(selection) {
          this.multipleSelection = selection
        },

## 7 定义删除方法 ##

// 批量删除
        batchRemove() {
          // 判断是否选中记录
          if (this.multipleSelection.length === 0) {
            this.$message({
              type: 'warning',
              message: '请选择要删除的记录'
            })
            return
          }
          // 询问是否删除
          this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 拿到选中数据
            const idList = []
            this.multipleSelection.forEach(item => {
              idList.push(item.id)
            })
            return teacherApi.batchRemove(idList)
          }).then(response => {
            // 刷新页面
            this.fetchData()
            // 弹出成功提示
            this.$message({
              message: response.message,
              type: 'success'
            })
          }).catch((err) => {
            console.log(err)
            if (err === 'cancel') {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            }
          })
        },

# 三 测试 #

## 1 选中某项删除 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

## 2 不选任何一项删除 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/0a255040277442928f492f412ba3747c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/6dc54122d48e4585b936ce68518bb649.png