创作者前端-逻辑删除创作者

监听删除按钮的点击，然后传入当前删除记录的 id 进行逻辑删除

<el-table-column label="操作" align="center">
  <template slot-scope="scope">
    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
    <el-button type="danger" size="mini" icon="el-icon-delete"
               @click="deleteAuthorWithId(scope.row.id)">删除
    </el-button>
  </template>
</el-table-column>

实现删除的方法

编写删除的前端 api

// 2.删除作者
deleteAuthorWithId(id) {
  return request({
    // 路由参数拼接
    url: `/service_video/author/deleteAuthor/${id}/`,
    method: 'delete'
  })
}

修改后端的接口

实现前端删除的方法

// 删除创作者
deleteAuthorWithId(id) {
  // 用户提示
  this.$confirm('此操作将永久删除该创作者！, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 调用删除的api
    author.deleteAuthorWithId(id).then(response => {
      this.$message({
        type: 'success',
        message: response.message
      });
      // 重新加载数据
      this.getAuthorList();
    }).catch(error => {
      this.$message.error('删除失败！');
    })
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
}