修改功能需要注意到隐藏路由

1、路由部分

 

{
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/list'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加讲师',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '添加讲师', icon: 'tree' }
      },
      {
        path: 'edit/:id',
        name: '修改讲师',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '添加讲师', icon: 'tree' },
      hidden:true
      }
    ]
  },

 

2、页面部分

列表页面

<el-table
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>
      <el-table-column prop="name" label="名称" width="80" />
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

修改页面

<template>
  <div class="app-container">
    <el-form label-width="130px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" controls-position="left" :min="0" ></el-input-number>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" placeholder="请选择讲师头衔" clearable >
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="首席讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"></el-input>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input type="textarea" v-model="teacher.intro" :rows="10"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

3、脚本部分

teacher.js

 

getTeacherInfo(id){
        return request({
            url:`/eduservice/teacher/getTeacher/${id}`,
            method:'get',
        })
    },
    updateTeacher(teacher){
        return request({
            url:'/eduservice/teacher/updateTeacher',
            method:'post',
            data:teacher
        })
    }

 

<script>
import teacherApi from '@/api/teacher/teacher.js'

export default{
    data(){
        return{
            teacher:{
                name:'',
                sort:0,
                level:1,
                carrer:'',
                intro:'',
                avatar:''

            },
            saveBtnDisabled:false  //保存按钮是否禁用
        }
    },
    created(){
        //根据路由传参确定是否需要
        if(this.$route.params&&this.$route.params.id){
            const id=this.$route.params.id
            this.getInfo(id)
      }
    },
    methods:{
        saveOrUpdate(){ 
          //根据是否有id这个参数，判断当前操作是添加还是修改
          if(this.teacher.id){ 
            this.updateData()
          }
          else{
            this.saveData()
          }
        },
        //添加讲师方法
        saveData(){
            teacherApi.addTeacher(this.teacher)
            .then(responser=>{
                 this.$message({
                type: 'success',
                message: '添加成功!'
                });
                //回到列表页面，路由跳转
                this.$router.push({path:'/teacher/table'}) 
            })
        },
        //获取讲师数据
        getInfo(id){
          teacherApi.getTeacherInfo(id)
          .then(response=>{
            this.teacher=response.data.teacher
          })
        },
        //修改讲师方法
        updateData(){
          teacherApi.updateTeacher(this.teacher)
          .then(response=>{
             this.$message({
                type: 'success',
                message: '修改成功!'
                });
                this.$router.push({path:'/teacher/table'})
          })
        }
    }
}
</script>