项目场景:
Springboot+MyBatisPlus+vue2+ElementUI删除示例
问题描述
后端使用:Springboot+MyBatisPlus
前台使用:vue2+ElementUI
实现删除功能
---
# 详细代码:
后台代码
实体类
@Data
@TableName("sys_category")
public class SysCategory {
@TableId(type = IdType.AUTO)
private Long categoryId;
private String categoryName;
private Long orderNum;
}
Controller层
//删除
@DeleteMapping("/{categoryId}")
public ResultVo delete(@PathVariable("categoryId")Long categoryId){
boolean b = sysCategoryService.removeById(categoryId);
if(b){
return ResultUtils.success("删除成功");
}
return ResultUtils.error("删除失败");
}
前端
<el-table :height="tableHeight" :data="tableData" border stripe>
<el-table-column prop="categoryName" label="分类名称"></el-table-column>
<el-table-column prop="orderNum" label="序号"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope"> <!--slot-scope="scope" 相当于一行的数据-->
<el-button type="primary" size="small" icon="el-icon-edit"
@click="editBtn(scope.row)">编辑</el-button> <!--scope.row 就是该行的数据所有消息对象-->
<el-button type="danger" size="small" icon="el-icon-delete"
@click="deleteBtn(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
//删除按钮
deleteBtn(row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let res = await deleteApi({ categoryId: row.categoryId });
if (res && res.code == 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
}
this.getList();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
this.getList();
});
}
---