讲师删除功能

123 阅读1分钟

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: "已取消删除"
          });
        });
    }