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

本文实例为大家分享了Java实现多选批量删除功能的具体代码，供大家参考，具体内容如下
选择前效果图

文章图片

选中效果图

文章图片

前端vue代码
1、页面显示template
使用方法 @selection-change=“changeFun” 获取表中选中的行所有显示的数据

2、定义显示值

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

3、选中时触发方法
@selection-change=“changeFun”

// 获取多选框选中的值changeFun(val) {console.log(val)this.checkBoxData = https://www.it610.com/article/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: '已取消操作'})})}

后台接收并解析

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

【Java实现多选批量删除功能（vue+Element）】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。