Vue与SpringBoot（二）实现批量删除功能

1、在el-table中增加以下代码

增加属性：

ref="multipleTable" @selection-change="handleSelectionChange"

添加一列：

<el-table-column type="selection" width="55"></el-table-column>

2、在表格上方增加按钮代码

<el-button class="small" type="warning" size="small" @click="removeBatch()">批量删除</el-button>

如下图：

3、data中增加

data () {
    return {
      tableData: [],
      keywords:'',
      logIds:'',
      msg:'',//记录每一条的信息，便于取id
      multipleSelection:[],//多选的数据
      currentPage: 1,
      pagesize: 10
    }
  }

4、methods中增加两个函数

handleSelectionChange(val) {
    this.multipleSelection = val;
    },
    removeBatch () {
      const length = this.multipleSelection.length;
        alert(length);
        for (let i = 0; i < length; i++) {
          this.logIds += this.multipleSelection[i].logId+','
        }
      this.$confirm('此操作将批量删除日志信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {        
        this.$axios
          .post('/loginfo/deleteBatchLogs', {logIds: this.logIds}).then(resp => {
            if (resp && resp.status === 200) {
              this.loadLogInfo()
            }
          })
      }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

5、后台代码Controller中

/**
     * 批量删除
     * @param request
     * @param response
     */
    @PostMapping("/api/loginfo/deleteBatchLogs")
    public String deleteBatchLogs(@RequestBody LogInfo logInfo) {
        try {
            System.out.println("logInfo.getLogIds():"+logInfo.getLogIds());
            String[] ids = logInfo.getLogIds().split(",");
            for (String id : ids) {
                logInfo.setLogId(Long.parseLong(id));
                logInfoService.logDeleteById(logInfo);
            }
            return "success";
        } catch (Exception e) {
            e.printStackTrace();
            return "fail";
        }
    }

其他dao以及mapper中省略了。