Java实现多选批量删除功能(vue+Element)
作者：Explorer_S
这篇文章主要为大家详细介绍了Java实现多选批量删除功能，包括前端vue实现代码文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Java实现多选批量删除功能的具体代码，供大家参考，具体内容如下
选择前效果图
选中效果图
前端vue代码
1、页面显示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>
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、批量删除按钮绑定事件
<el-button class="btn" size="mini" :disabled="btnChangeEnable" @click="delBatchHandle" type="danger">批量删除</el-button>
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<String, Object> paramsMap) {
if (paramsMap != null && paramsMap.size() > 0) {
String vrDatas = paramsMap.get("vrDatas").toString();
String[] ids = vrDatas.split(",");
for (String id : ids) {
// 根据自己的service方法逻辑处理
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。