1、 新增修改按钮
<router-link :to="'/teacher/add/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>
2、点击按钮跳转页面
(1)添加隐藏路由
{
path: 'add/:id',
name: 'EduTeacherEdit',
component: () => import('@/views/teacher/add'),
meta: { title: '编辑讲师', noCache: true },
hidden: true
}
3、回显数据
(1)在src/api/teacher.js中创建根据id查询老师的接口方法
//根据id查询讲师
getTeacherById(id){
return request({
url: `/eduservice/eduteacher/getTeacherById/${id}`,
method: 'get'
})
}
(2)自动调用接口回显数据,创建新属性id
data() {
return {
id:'',
eduTeacher: {},
saveBtnDisabled: false
};
},
created() {
console.log(this.$route.params.id)
if(this.$route.params&&this.$route.params.id){
this.id = this.$route.params.id
teacher.getTeacherById(this.id)
.then(response=>{
this.eduTeacher = response.data.eduTeacher
})
}
},
4、保存修改功能
(1)创建api接口
//修改讲师
updateTeacher(eduTeacher){
return request({
url: `/eduservice/eduteacher/updateTeacher`,
method: 'post',
data: eduTeacher//用json格式传输
})
}
(2)调用接口方法实现
//添加或者修改讲师的保存
saveOrUpdate() {
if(this.eduTeacher.id){
this.updateEduTeacher()
}else{
this.saveTeacher()
}
},
//添加讲师
saveTeacher() {
teacher.addTeacher(this.eduTeacher).then(response => {
//提示成功
this.$message({
type: "success",
message: "添加成功!"
});
//路由切换
this.$router.push({ path: "/teacher/list" });
});
},
//更新讲师
updateEduTeacher() {
teacher.updateTeacher(this.eduTeacher).then(response => {
//提示成功
this.$message({
type: "success",
message: "修改成功!"
});
//路由切换
this.$router.push({ path: "/teacher/list" });
});
}