前端:
在前端vue的crud中添加@selection-change="selectionChange"
在js文件对应地方加上 selection:true
<el-button type="danger" @click="delSelection" >批量删除</el-button>
加上批量删除按钮。
做了以上这些之后,前端就会出现多选框和按钮
前端对应的批量删除方法
//批量删除
selectionChange(item){
this.ids = item; //将选中的每行数据放入变量中
},
delSelection(item){
for (var i = 0; i < this.ids.length; i++) {
this.deleteData.push(this.ids[i].invoiceId) //逐个取出变量中每行数据的id
}
//alert(this.deleteData.toString())
if (this.deleteData.length !=0){ //ids为之定义的数组属性值,在data()中定义
this.$confirm("是否确认删除选中的所有记录吗?", "提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then( ()=> {
return delByids(this.deleteData) //后端接口根据数组批量删除记录
}).then(data => {
this.ids = [],
this.deleteData = [] //清空选中的数据行
this.$message.success('删除成功')
this.getList(this.page) //刷新数据
})
}else{
this.$message.error('未选中任何项')
}
},
在data中定义数组 变量。
配置后端访问路径。
后端controller层:
如果你报这种错误
那么就是你前端传的数据类型和后端接收的参数类型不一致,如果主键是自动生成的varchar类型,那麽在数据库中会是很长的一段数字。后端就不能是List<Integer>,应该使用String类型,修改成List<String>。