1、html部分

<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="right" :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>
<script>

2、指令碼部分

teacher.js

 addTeacher(teacher){
        return request({
            url:`/eduservice/teacher/addTeacher`,
            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(){
    },
    methods:{
        saveOrUpdate(){ 
            this.saveData()
        },
        //新增講師方法
        saveData(){
            teacherApi.addTeacher(this.teacher)
            .then(responser=>{
                 this.$message({
               　　 type: 'success',
               　　 message: '新增成功!'
              　　  });
               　　 //回到列表頁面，路由跳轉
               　　 this.$router.push({path:'/teacher/table'}) 
            })
        }
    }
}
</script>