标签：vue name admin id master table path 讲师 teacher

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

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>

标签：vue,name,admin,id,master,table,path,讲师,teacher
来源： https://www.cnblogs.com/mions/p/15689061.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。