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

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

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

选择前效果图

选中效果图

前端vue代码

1、页面显示template

使用方法 @selection-change=“changeFun” 获取表中选中的行所有显示的数据

:data="list"

border

fit

style="width: 100%;"

v-loading="loading"

element-loading-text="请给我点时间！"

@selection-change="changeFun"

>

{{scope.row.name }}

{{getTypeName(scope.row.type)}}

{{scope.row.message }}

{{scope.row.createUserId}}

{{parseTime(scope.row.createDateTime)}}

{{scope.row.modifyUserId}}

{{parseTime(scope.row.modifyDateTime)}}

删除

:data="list"

border

fit

style="width: 100%;"

v-loading="loading"

element-loading-text="请给我点时间！"

@selection-change="changeFun"

>

{{scope.row.name }}

{{getTypeName(scope.row.type)}}

{{scope.row.message }}

{{scope.row.createUserId}}

{{parseTime(scope.row.createDateTime)}}

{{scope.row.modifyUserId}}

{{parseTime(scope.row.modifyDateTime)}}

删除

批量删除

&lhttp://t;!--分页 begin-->

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"

>

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"

>

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: '已取消操作'

})

})

}

后台接收并解析

/**

* 批量删除信息

*

* author:

* @param paramsMap

* @return

*/

@RequestMapping(value = "/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方法逻辑处理

}

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。