1、 添加按钮,添加事件
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeDataById(scope.row.id)"
>删除</el-button>
2、编写删除功能js代码
(1)完成与后端接口对应api方法,在src/api/teacher.js添加删除讲师的方法。
//删除讲师方法
deleteTeacherId(id){
return request({
url: `/eduservice/eduteacher/${id}`,
method: 'delete'
})
}
(2)在src/views/teacher/list.vue页面调用添加的js方法
//根据id删除讲师
removeDataById(id){
console.log(id)
//调用接口删除数据
teacher.deleteTeacherId(id)
.then(response=>{
console.log('删除成功')
//刷新表格
this.getTeacherList()
})
}
(3)添加删除提示
//根据id删除讲师
removeDataById(id) {
console.log(id);
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
//调用接口删除数据
teacher.deleteTeacherId(id).then(response => {
console.log("删除成功");
this.$message({
type: "success",
message: "删除成功!"
});
//刷新表格
this.getTeacherList();
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
}