1.章节介绍

前一篇介绍了班级管理模块，这一篇编写教师管理模块，需要的朋友可以拿去自己定制。：）

2.获取源码

源码是捐赠方式获取，详细请QQ联系我 ：）！

3.实现效果

教师列表

修改教师

4.模块代码

页面布局

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item>首页</el-breadcrumb-item><el-breadcrumb-item>教师管理</el-breadcrumb-item><el-breadcrumb-item>教师列表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><!-- 搜索 添加 --><el-row :gutter="20"><el-col :span="6"><el-input placeholder="请输入教师姓名"v-model="queryInfo.query"clearable@clear="getTeacherList"><el-button slot="append"icon="el-icon-search"@click="getTeacherList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary"@click="addDialogVisible = true">添加教师</el-button></el-col></el-row><!-- 教师列表区域 --><el-table :data="teacherList"borderstripe><!-- stripe: 斑马条纹border：边框--><el-table-column type="index"label="序号"></el-table-column><el-table-column prop="teacherNo"label="教师编号"></el-table-column><el-table-column prop="teacherName"label="教师姓名"></el-table-column><el-table-column prop="gender"label="性别"><template slot-scope="scope">{{scope.row.gender == 'F' ? '女': '男'}}</template></el-table-column><el-table-column prop="phone"label="联系方式"></el-table-column><el-table-column prop="remark"label="备注"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="primary"icon="el-icon-edit"size="mini"circle@click="showEditDialog(scope.row.id)"></el-button><el-button type="danger"icon="el-icon-delete"size="mini"circle@click="removeById(scope.row.id)"></el-button></template></el-table-column></el-table><!-- 分页区域 --><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pageNo":page-size="queryInfo.pageSize"layout="total, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 添加教师的对话框 --><el-dialog title="添加教师":visible.sync="addDialogVisible"width="30%"@close="addDialogClosed"><!-- 内容主体 --><el-form :model="addForm"ref="addFormRef":rules="addFormRules"label-width="100px"><el-form-item label="教师编码"prop="teacherNo"><el-input v-model="addForm.teacherNo"></el-input></el-form-item><el-form-item label="教师名称"prop="teacherName"><el-input v-model="addForm.teacherName"></el-input></el-form-item><el-form-item label="性别"prop="gender"><el-radio v-model="addForm.gender"label="F">女</el-radio><el-radio v-model="addForm.gender"label="M">男</el-radio></el-form-item><el-form-item label="联系方式"prop="phone"><el-input v-model="addForm.phone"></el-input></el-form-item><el-form-item label="备注"prop="remark"><el-input v-model="addForm.remark"></el-input></el-form-item></el-form><span slot="footer"class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary"@click="add">确 定</el-button></span></el-dialog><!-- 修改教师的对话框 --><el-dialog title="修改教师信息":visible.sync="editDialogVisible"width="30%"@close="editDialogClosed"><!-- 内容主体 --><el-form :model="editForm"ref="editFormRef":rules="editFormRules"label-width="70px"><el-form-item label="教师编码"><el-input v-model="editForm.teacherNo"></el-input></el-form-item><el-form-item label="教师名称"><el-input v-model="editForm.teacherName"></el-input></el-form-item><!-- TODO --><el-form-item label="性别"prop="gender"><el-radio v-model="editForm.gender"label="F">女</el-radio><el-radio v-model="editForm.gender"label="M">男</el-radio></el-form-item><el-form-item label="联系方式"><el-input v-model="editForm.phone"></el-input></el-form-item><el-form-item label="备注"><el-input v-model="editForm.remark"></el-input></el-form-item></el-form><span slot="footer"class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary"@click="editUser">确 定</el-button></span></el-dialog></div></template>

数据和事件

<script>export default {data() {return {// 院系列表deptList: [],// 获取教师列表查询参数对象queryInfo: {query: "",// 当前页数pageNo: 1,// 每页显示多少数据pageSize: 5,},teacherList: [],total: 0,// 添加教师对话框addDialogVisible: false,// 教师添加addForm: {teacherNo: "",teacherName: "",gender: "F",phone: "",remark: "",},// 教师添加表单验证规则addFormRules: {teacherNo: [{required: true, message: "请输入教师编号", trigger: "blur" },{min: 2,max: 10,message: "教师编号的长度在2～10个字",trigger: "blur",},],teacherName: [{required: true, message: "请输入教师姓名", trigger: "blur" },{min: 2,max: 50,message: "教师名称的长度在2～50个字",trigger: "blur",},],},// 修改教师editDialogVisible: false,editForm: {},// 编辑教师表单验证editFormRules: {teacherNo: [{required: true, message: "请输入教师编号", trigger: "blur" },],teacherName: [{required: true, message: "请输入教师姓名", trigger: "blur" },],},};},created() {this.getTeacherList();},methods: {async getTeacherList() {const {data: res } = await this.$http.get("teacher/list", {params: this.queryInfo,});if (res.code !== 200) {return this.$message.error("获取教师列表失败！");}this.teacherList = res.data.records;this.total = res.data.total;},// 监听 pageSize改变的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pageSize = newSize;this.getTeacherList();},// 监听 页码值 改变事件handleCurrentChange(newSize) {// console.log(newSize)this.queryInfo.pageNo = newSize;this.getTeacherList();},// 监听 添加教师对话框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields();},// 添加教师add() {// 提交请求前，表单预验证this.$refs.addFormRef.validate(async (valid) => {// console.log(valid)// 表单预校验失败if (!valid) return;const {data: res } = await this.$http.post("teacher/modify",this.addForm);if (res.code !== 200) {this.$message.error("添加教师失败！");return;}this.$message.success("添加教师成功！");// 隐藏添加教师对话框this.addDialogVisible = false;this.getTeacherList();});},// 编辑教师信息async showEditDialog(id) {const {data: res } = await this.$http.get("teacher/" + id);if (res.code !== 200) {return this.$message.error("查询教师信息失败！");}this.editForm = res.data;this.editDialogVisible = true;},// 监听修改教师对话框的关闭事件editDialogClosed() {this.$refs.editFormRef.resetFields();},// 修改教师信息editUser() {// 提交请求前，表单预验证this.$refs.editFormRef.validate(async (valid) => {// console.log(valid)// 表单预校验失败if (!valid) return;const {data: res } = await this.$http.post("teacher/modify", {id: this.editForm.id,teacherNo: this.editForm.teacherNo,teacherName: this.editForm.teacherName,gender: this.editForm.gender,});if (res.code !== 200) {this.$message.error("更新教师信息失败！");}// 隐藏添加教师对话框this.editDialogVisible = false;this.$message.success("更新教师信息成功！");this.getTeacherList();});},// 删除教师async removeById(id) {const confirmResult = await this.$confirm("确定删除该教师?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).catch((err) => err);// 点击确定 返回值为：confirm// 点击取消 返回值为： cancelif (confirmResult !== "confirm") {return this.$message.info("已取消删除");}const {data: res } = await this.$http.post("teacher/remove/" + id);if (res.code !== 200) return this.$message.error("删除教师失败！");this.$message.success("删除教师成功！");this.getTeacherList();},},};</script>