[Java] Java实现多选批量删除功能(vue+Element)

<template>
  <div class="dept tab-container">
  <div class="dept-table">
    <div id="query" class="newTable">
    <!-- 列表数据展示-->
    <el-table
      :data="list"
      border
      fit
     
      v-loading="loading"
      element-loading-text="请给我点时间！"
      @selection-change="changeFun"
    >
      <el-table-column type="selection" width="55" v-model="checkBoxData"></el-table-column>
      <el-table-column align="center" label="姓名" min-width="60px">
      <template slot-scope="scope">
        <span>{{scope.row.name }}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" label="记录类型" min-width="80px">
      <template slot-scope="scope">
        <span>{{getTypeName(scope.row.type)}}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" label="返回信息" min-width="180px">
      <template slot-scope="scope">
        <span>{{scope.row.message }}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" label="创建人">
      <template slot-scope="scope">
        <span>{{scope.row.createUserId}}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" min-width="55px">
      <template slot-scope="scope">
        <span>{{parseTime(scope.row.createDateTime)}}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" label="最后修改人">
      <template slot-scope="scope">
        <span>{{scope.row.modifyUserId}}</span>
      </template>
      </el-table-column>
      <el-table-column align="center" label="最后修改时间" min-width="55px">
      <template slot-scope="scope">
        <span>{{parseTime(scope.row.modifyDateTime)}}</span>
      </template>
      </el-table-column>
      <el-table-column class-name="status-col" min-width="100px" label="操作">
      <template slot-scope="scope">
        <el-button class="btn" size="mini" type="danger" @click="delHandle(scope.row.id)" v-if="isButtonShow("userDel")">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 批量删除-->
    <br />
    <div>
      <el-button class="btn" size="mini" :disabled="btnChangeEnable" @click="delBatchHandle" type="danger">批量删除</el-button>
    </div>
    <br />
    <!--分页 begin-->
    <div class="pagination-container">
      <el-row>
      <el-col :span="19">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.current"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        ></el-pagination>
      </el-col>
      </el-row>
    </div>
    <!--分页 end-->
    </div>
  </div>
  </div>
</template>

data(){
  return{
   btnChangeEnable: true, // 批量删除禁用
   checkBoxData: [],  //多选框选择的值
  }
 }

// 获取多选框选中的值
changeFun(val) {
  console.log(val)
  this.checkBoxData = val;
  if(val == ""){
   this.btnChangeEnable = true;
  } else {
  this.btnChangeEnable = false;
  }
},

<el-button class="btn" size="mini" :disabled="btnChangeEnable" @click="delBatchHandle" type="danger">批量删除</el-button>

import axios from "axios";

// 批量删除
delBatchHandle() {
  this.$confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    // 解析checkBoxData中的id值，也可以解析其他包含的数据
    var ids = this.checkBoxData.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
    console.log(ids)
    axios.post("/verityRecord/deleteBatch", { vrDatas: ids }).then((result) => {
    if (result.code == "0000") {
      this.$message({
      type: "success",
      message: "操作成功!"
      })
      this.getList()
    } else {
      this.$message({
      type: "error",
      message: "操作失败!"
      })
    }
    })
  }).catch(() => {
    this.$message({
    type: "info",
    message: "已取消操作"
    })
  })
}

/**
 * 批量删除信息
 * <p>
 * author:
 * @param paramsMap
 * @return 
 */
@RequestMapping(value = "/deleteBatch", method = RequestMethod.POST)
public void deleteBatch(@RequestBody Map<String, Object> paramsMap) {
  if (paramsMap != null && paramsMap.size() > 0) {
    String vrDatas = paramsMap.get("vrDatas").toString();
    String[] ids = vrDatas.split(",");
    for (String id : ids) {
      // 根据自己的service方法逻辑处理
    }
  }
}