vue判断是新增还是修改
新增路径
{ 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 })
