vue-admin-template-master 添加功能

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>