Java实现多选批量删除功能（vue+Element）

选择前效果图 选中效果图

前端vue代码

页面显示template 使用方法 @selection-change=“changeFun” 获取表中选中的行所有显示的数据 <template> <div class="dept tab-container"> <div class="dept-table"> <div id="query" class="newTable"> <!-- 列表数据展示--> <el-table :data="list" border fit style="width: 100%;" 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 style="float: left;"> <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: [], //多选框选择的值 } } 选中时触发方法 @selection-change=“changeFun” // 获取多选框选中的值 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> 触发事件

导入 axios

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方法逻辑处理 } } }