这篇文章主要为大家详细介绍了Java实现多选批量删除功能，包括前端vue实现代码文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Java实现多选批量删除功能的具体代码，供大家参考，具体内容如下
选择前效果图
选中效果图
前端vue代码
1、页面显示template
使用方法 @selection-change=“changeFun” 获取表中选中的行所有显示的数据
<div class="dept tab-container"> <div class="dept-table"> <div id="query" class="newTable"> <!-- 列表数据展示--> <span>{{scope.row.name }}</span> <span>{{getTypeName(scope.row.type)}}</span> <span>{{scope.row.message }}</span> <span>{{scope.row.createUserId}}</span> <span>{{parseTime(scope.row.createDateTime)}}</span> <span>{{scope.row.modifyUserId}}</span> <span>{{parseTime(scope.row.modifyDateTime)}}</span> 删除<!-- 批量删除--><br /><div style="float: left"> 批量删除</div><br /><!--分页 begin--><div class="pagination-container"> </div><!--分页 end--></div></div></div>
2、定义显示值
data(){ return{ btnChangeEnable: true, // 批量删除禁用 checkBoxData: [], //多选框选择的值 } }
3、选中时触发方法
@selection-change=“changeFun”
// 获取多选框选中的值 changeFun(val) { console.log(val) this.checkBoxData = val; if(val == ''){ this.btnChangeEnable = true; } else { this.btnChangeEnable = false; } },
4、批量删除按钮绑定事件
批量删除
5、触发事件
导入 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 paramsMap) { if (paramsMap != null && paramsMap.size() > 0) { String vrDatas = params<em style="color:transparent">来源[email protected]搞@^&代*@码)网</em>Map.get("vrDatas").toString(); String[] ids = vrDatas.split(","); for (String id : ids) { // 根据自己的service方法逻辑处理 } } }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是Java实现多选批量删除功能(vue+Element)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Java实现多选批量删除功能(vue+Element)
转载请注明原文链接：Java实现多选批量删除功能(vue+Element)
