一 后端实现
/**
* 功能描述：根据ID列表删除讲师
*
* @param idList 讲师ID列表
* @return R 返回给前端的数据
* @author cakin
* @date 2020/11/28
*/
@ApiOperation(value = "根据ID列表删除讲师")
@DeleteMapping("batch-remove")
public R removeRows(@ApiParam(value = "讲师ID列表", required = true) @RequestBody List<String> idList) {
boolean result = teacherService.removeByIds(idList);
if (result) {
return R.ok().message("删除成功");
} else {
return R.error().message("数据不存在");
}
}
二 前端实现
1 api
// 批量删除讲师
batchRemove(idList) {
return request({
url: '/admin/edu/teacher/batch-remove',
method: 'delete',
data: idList
})
},
2 添加删除复选框
<el-table :data="list" border stripe>
<!-- 选择列 -->
<el-table-column type="selection" />
3 添加删除按钮
<!-- 删除按钮 -->
<div style="margin-bottom: 10px;">
<el-button type="danger" size="mini" @click="batchRemove()">批量删除</el-button>
</div>
4 data中定义数据
multipleSelection: [] // 批量选中的记录列表
5 表格组件中添加选择事件
<el-table
:data="list"
border
stripe
@selection-change="handleSelectionChange">
6 定义事件的回调函数
// 当表格中多选项发生变化的时候触发
handleSelectionChange(selection) {
this.multipleSelection = selection
},
7 定义删除方法
// 批量删除
batchRemove() {
// 判断是否选中记录
if (this.multipleSelection.length === 0) {
this.$message({
type: 'warning',
message: '请选择要删除的记录'
})
return
}
// 询问是否删除
this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 拿到选中数据
const idList = []
this.multipleSelection.forEach(item => {
idList.push(item.id)
})
return teacherApi.batchRemove(idList)
}).then(response => {
// 刷新页面
this.fetchData()
// 弹出成功提示
this.$message({
message: response.message,
type: 'success'
})
}).catch((err) => {
console.log(err)
if (err === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除'
})
}
})
},
三 测试
1 选中某项删除
2 不选任何一项删除
| 
转播
