spring boot 配合element ui vue实现表格的批量删除(前后端详细教学,简单易懂,有手就行)
研究了其他人的博客,找到了一篇有含金量的,进行了部分改写实现前后端分离,参考博主为小白Rachel先看看页面效果,要是符合你们所需的功能那就继续看下去1406 1407 被干掉了。
·
目录
一.前言:
研究了其他人的博客,找到了一篇有含金量的,进行了部分改写实现前后端分离,参考博主为小白Rachel
先看看页面效果,要是符合你们所需的功能那就继续看下去
1406 1407 被干掉了
二. 前端代码:
2.1.element ui组件代码
想要实现勾选框那么就需要加上
<el-table-column type="selection" width="55" align="center" />
加入事件。该事件可用于获取勾选到的那一行数据的id,如果勾选多行数据,那么就会将id打包成数组,我们就可以将数组传给后端,然后由Java程序员(还是我)进行接收,进行批量删除。
@selection-change="handleSelectionChange"
<el-table
:data="operLogs"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<el-table-column
label="日志编号"
width="140">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.operId }}</span>
</template>
</el-table-column>
2.2删除按钮
<el-popconfirm
confirm-button-text='好的'
cancel-button-text='取消'
icon="el-icon-info"
icon-color="red"
@confirm="handleDelete()"
title="确定删除吗?"
>
<el-button type="danger" round size="mini" slot="reference" :disabled="multiple">删除</el-button>
</el-popconfirm>
:disabled="multiple"
设置状态默认为true 代表禁用了。
2.3.data
data() {
return {
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
}
},
因为我的data里面的数据太多,所以我就进行了删减,把实现批量删除的数据给列了出来。
2.4.methods
// 多选框选中数据
handleSelectionChange(selection) {
console.log(selection);
this.ids = selection.map(item => item.operId);// 需要根据数据情况调整id名称
console.log(this.ids);
this.single = selection.length != 1;
this.multiple = !selection.length;
},
handleDelete() {
//传数组进行批量删除
this.axios.post("http://localhost:8080/operLog", this.ids)
.then(result => {
if (result.data.status == "OK") {
this.loadOperLogByPage(this.current);
}
})
},
// 多选框选中数据 handleSelectionChange(selection) { console.log(selection); this.ids = selection.map(item => item.operId);// 需要根据数据情况调整id名称 console.log(this.ids); this.single = selection.length != 1; this.multiple = !selection.length; },
如果选中了数据,就修改mulitple的属性为false,改变button的disabled为false,代表可以勾选
handleDelete() { //传数组进行批量删除 this.axios.post("http://localhost:8080/operLog", this.ids) .then(result => { if (result.data.status == "OK") { this.loadOperLogByPage(this.current); } }) },
懂得都懂
三.后端代码:
@PostMapping("/operLog")
public ResponseResult<String> deleteByIds(@RequestBody List<Long> operIds){
System.out.println(operIds);
int i = operLogService.deleteByIds(operIds);
if (i==1){
return ResponseResult.ok("删除成功");
}
else {
return ResponseResult.ok("删除失败");
}
}
执行批量删除,一行搞定
更多推荐
已为社区贡献1条内容
所有评论(0)