新增路徑
{ path: 'save', name: '添加講師', component: () => import('@/views/edu/teacher/save'), meta: { title: '添加講師', icon: 'tree' } }
修改路徑
<router-link :to="'/teacher/edit/'+scope.row.id"> <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button> </router-link>
根據路由和id的值判斷是新增還是修改
同一個頁面，created只執行一次
點擊確定
點擊菜單欄的新增（這里只走watch，created方法不走）
點擊確定（如果不用watch，這里不是顯示空白的新增頁面，而是帶有數據的修改的數據）
vue頁面
列表頁面
<template> <div class="app-container"> <!--查詢表單--> <el-form :inline="true"> <el-form-item> <el-input v-model="searchData.name" placeholder="講師" /> </el-form-item> <el-form-item> <el-select v-model="searchData.level" clearable placeholder="頭銜"> <el-option value="1" label="高級講師" /> <el-option value="2" label="首席講師" /> </el-select> </el-form-item> <el-form-item label="入駐時間"> <el-date-picker v-model="searchData.begin" placeholder="開始時間" value-format="yyyy-MM-dd" /> </el-form-item> <el-form-item label="-"> <el-date-picker v-model="searchData.end" placeholder="結束時間" value-format="yyyy-MM-dd" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" @click="pageList()" >查詢</el-button > <el-button type="default" @click="resetData()">清空</el-button> </el-form-item> </el-form> <div> <el-button type="danger" size="mini" @click="batchRemove()" >批量刪除</el-button > </div> <!-- 表格 --> <el-table :data="list" border stripe @selection-change="handleSelectionChange" > <el-table-column type="selection" /> <el-table-column label="ID" width="50"> <!-- 使用連續的序號 --> <template slot-scope="scope"> {{ (currentPage - 1) * limit + scope.$index + 1 }} </template> </el-table-column> <el-table-column prop="name" label="名稱" width="80" /> <el-table-column label="頭銜" width="90"> <template slot-scope="scope"> <span v-if="scope.row.level === 1"> <el-tag type="primary" size="mini">高級講師</el-tag> </span> <span v-else> <el-tag type="success" size="mini">首席講師</el-tag> </span> </template> </el-table-column> <el-table-column prop="intro" label="資歷" /> <el-table-column prop="sort" label="排序" width="50" /> <el-table-column prop="joinDate" label="入駐時間" width="160" /> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="toUpdate(scope.row.id)" >更改</el-button > <el-button type="danger" size="mini" @click="removeById(scope.row)" >刪除</el-button > </template> </el-table-column> </el-table> <!--分頁組件--> <el-pagination :current-page="currentPage" :page-size="limit" :total="total" :page-sizes="[5, 10, 15, 20]" style="padding: 12px 8px; text-align: center" layout="sizes, prev, pager, next, jumper, ->, total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script> import teacherApi from "@/api/teacher"; export default { data() { return { list: [], //列表數據 total: 0, currentPage: 1, //當前頁 limit: 10, //每頁記錄數 searchData: {}, idList: null, }; }, created() { this.pageList(); }, methods: { //跳轉到修改頁面 toUpdate(id) { this.$router.push({ path: `/teacher/editTeacher/${id}` }); }, //批量刪除 batchRemove() { debugger; if (!this.idList || this.idList.length <= 0) { this.$message({ type: "info", message: "請先選擇要刪除的數據！", }); return false; } let arrayIds = []; this.idList.forEach((element) => { arrayIds.push(element.id); }); this.$confirm("此操作將永久刪除, 是否繼續?", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning", }) .then(() => { //刪除api teacherApi.batchRemove(arrayIds).then((res) => { debugger; if (res.code === 20000 && res.data) { this.$message({ type: "info", message: "刪除成功: ", }); this.pageList(); } else { this.$message({ type: "info", message: "刪除失敗: ", }); } }); }) .catch(() => { this.$message({ type: "info", message: "已取消刪除", }); }); }, //多選 handleSelectionChange(idList) { this.idList = idList; }, //刪除 removeById(data) { this.$confirm("此操作將永久刪除" + data.name + ", 是否繼續?", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning", }) .then(() => { //刪除api teacherApi.removeById(data.id).then((res) => { if (res.code === 20000 && res.data) { this.$message({ type: "info", message: "刪除成功: ", }); this.pageList(); } else { this.$message({ type: "info", message: "刪除失敗: ", }); } }); }) .catch(() => { this.$message({ type: "info", message: "已取消刪除", }); }); }, resetData() { this.searchData = {}; this.pageList(); }, //改變數量 handleSizeChange(size) { this.limit = size; this.pageList(); }, //改變頁碼 handleCurrentChange(currentPage) { this.currentPage = currentPage; this.pageList(); }, //分頁查詢 pageList() { teacherApi .pageList(this.currentPage, this.limit, this.searchData) .then((res) => { if (res.code === 20000 && res.data) { this.$message({ type: "info", message: "查詢成功: ", }); this.list = res.data.list; this.total = res.data.total; } else { this.$message({ type: "info", message: "查詢失敗: ", }); } }) .catch((e) => { this.$message({ type: "info", message: "查詢異常", }); }); }, }, }; </script>
新增和修改頁面（一個頁面）
<template> <div class="app-container"> 講師添加 <el-form label-width="120px"> <el-form-item label="活動名稱"> <el-input v-model="teacher.name" /> </el-form-item> <el-form-item label="入駐時間"> <el-date-picker type="date" placeholder="選擇日期" v-model="teacher.joinDate" value-format="yyyy-MM-dd" ></el-date-picker> </el-form-item> <el-form-item label="排序"> <el-input v-model="teacher.sort" :min="0" /> </el-form-item> <el-form-item label="講師頭銜"> <el-select v-model="teacher.level" clearable placeholder="講師頭銜"> <el-option :value="1" label="高級講師" /> <el-option :value="2" label="首席講師" /> </el-select> </el-form-item> <el-form-item label="講師簡介"> <el-input v-model="teacher.intro" /> </el-form-item> <el-form-item label="講師資歷"> <el-input v-model="teacher.career" /> </el-form-item> <el-form-item> <el-button type="primary" :disabled="saveBtnDisabled" @click="saveOrUpdate()" >{{ saveOrUpdateText }}</el-button > </el-form-item> </el-form> </div> </template> <script> import teacherApi from "@/api/teacher"; export default { data() { return { saveBtnDisabled: false, saveOrUpdateText: "保存", //講師對象 teacher: { name: "", intro: "", //講師簡介 career: "", //講師資歷 level: 1, //頭銜 1高級講師 2首席講師 avatar: "", //講師頭像 sort: 0, joinDate: "", //入駐時間 }, }; }, created() { //created之執行一次 alert(1); this.init(); }, watch: { //路由每次變化都執行 $route(to, from) { alert(2); this.init(); }, }, methods: { init() { //修改就把詳情查出來，否則頁面是新增頁面，新增頁面對象數據是空 if (this.$route.params && this.$route.params.id) { this.getDetail(this.$route.params.id); this.saveOrUpdateText = "修改"; } else { this.teacher = {}; this.saveOrUpdateText = "保存"; } }, //同一個頁面，判斷是新增還是修改 saveOrUpdate() { if (this.teacher.id) { //更新 this.update(); } else { //新增 this.save(); } }, //進入到修改頁面，需要回顯的數據 getDetail(id) { teacherApi.getDetail(id).then((res) => { debugger; if (res.code === 20000 && res.data.dataInfo) { debugger; this.teacher = res.data.dataInfo; this.$message({ type: "info", message: "數據初始化成功", }); } else { this.$message({ type: "info", message: "數據初始化失敗", }); } }); }, //新增 save() { teacherApi.save(this.teacher).then((res) => { if (res.code === 20000 && res.data) { this.$message({ type: "info", message: "添加成功", }); this.$router.push({ path: "/teacher/list" }); } else { this.$message({ type: "info", message: "添加失敗", }); } }); }, //修改 update() { teacherApi.update(this.teacher).then((res) => { if (res.code === 20000 && res.data) { this.$message({ type: "info", message: "修改成功", }); this.$router.push({ path: "/teacher/list" }); } else { this.$message({ type: "info", message: "修改失敗", }); } }); }, }, }; </script> <style> </style>
路由
import Vue from 'vue' import Router from 'vue-router' // in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading; // detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading Vue.use(Router) /* Layout */ import Layout from '../views/layout/Layout' /** * hidden: true if `hidden:true` will not show in the sidebar(default is false) * alwaysShow: true if set true, will always show the root menu, whatever its child routes length * if not set alwaysShow, only more than one route under the children * it will becomes nested mode, otherwise not show the root menu * redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb * name:'router-name' the name is used by <keep-alive> (must set!!!) * meta : { title: 'title' the name show in submenu and breadcrumb (recommend set) icon: 'svg-name' the icon show in the sidebar, } **/ export const constantRouterMap = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true }, { path: '/', component: Layout, redirect: '/dashboard', name: '在線教育', hidden: true, children: [{ path: 'dashboard', component: () => import('@/views/dashboard/index') }] }, { path: '/teacher', component: Layout, redirect: '/teacher/list', name: 'teacher', meta: { title: '講師管理', icon: 'peoples' }, children: [ { path: 'list', name: 'teacherList', component: () => import('@/views/teacher/list'), meta: { title: '講師列表', icon: 'peoples' } }, { path: 'addTeacher', name: 'addTeacher', component: () => import('@/views/teacher/form'), meta: { title: '添加講師', icon: 'tree' } }, { path: 'editTeacher/:id', name: 'editTeacher', component: () => import('@/views/teacher/form'), meta: { title: '編輯講師', icon: 'edit' }, hidden: true } ] }, { path: '/form', component: Layout, children: [ { path: 'index', name: 'Form', component: () => import('@/views/form/index'), meta: { title: 'Form', icon: 'form' } } ] }, { path: '/nested', component: Layout, redirect: '/nested/menu1', name: 'Nested', meta: { title: 'nested', icon: 'nested' }, children: [ { path: 'menu1', component: () => import('@/views/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'menu1' }, children: [ { path: 'menu1-1', component: () => import('@/views/nested/menu1/menu1-1'), name: 'Menu1-1', meta: { title: 'menu1-1' } }, { path: 'menu1-2', component: () => import('@/views/nested/menu1/menu1-2'), name: 'Menu1-2', meta: { title: 'menu1-2' }, children: [ { path: 'menu1-2-1', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'menu1-2-1' } }, { path: 'menu1-2-2', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'menu1-2-2' } } ] }, { path: 'menu1-3', component: () => import('@/views/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'menu1-3' } } ] }, { path: 'menu2', component: () => import('@/views/nested/menu2/index'), meta: { title: 'menu2' } } ] }, { path: '*', redirect: '/404', hidden: true } ] export default new Router({ // mode: 'history', //后端支持可開 scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap })