大二暑假第三周总结
马上就要放假啦,小学期的第二门课了,数据库的综合训练,然后自拟题目和需求,我也是迅速找了一个简单的教师信息管理系统,但是老师后来明确需要多个表联合操作,所以我一时犯了难,所以前几天都在构思整个系统的需求和如何实现,随后功夫不负有心人,在网上找到一个只对教师信心管理系统的SQL语句的练习,所以我看了看,进行了部分的改进,然后其余的几天就开始了代码的实现,然后我这次主要使用的技术有Mybatis、Mapper、Html、jsp、Filter、CheckcodeUtil、Cookie、Session、Element组件等。
此次的项目的Element的组件我也是使用了很多之前没用过的东西,比以前的高级很多,然后再最后的验收阶段也是收获了A级。
以下给出相关的代码实现:
CheckcodeUtil工具包:
package util; import javax.imageio.ImageIO; import java.awt.*; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.util.Arrays; import java.util.Random; /** * 生成验证码工具类 */ public class CheckCodeUtil { public static final String VERIFY_CODES = "123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; private static Random random = new Random(); public static void main(String[] args) throws IOException { OutputStream fos = new FileOutputStream("d://a.jpg"); String checkCode = CheckCodeUtil.outputVerifyImage(100, 50, fos, 4); System.out.println(checkCode); } /** * 输出随机验证码图片流,并返回验证码值(一般传入输出流,响应response页面端,Web项目用的较多) * * @param width 图片宽度 * @param height 图片高度 * @param os 输出流 * @param verifySize 数据长度 * @return 验证码数据 * @throws IOException */ public static String outputVerifyImage(int width, int height, OutputStream os, int verifySize) throws IOException { String verifyCode = generateVerifyCode(verifySize); outputImage(width, height, os, verifyCode); return verifyCode; } /** * 使用系统默认字符源生成验证码 * * @param verifySize 验证码长度 * @return */ public static String generateVerifyCode(int verifySize) { return generateVerifyCode(verifySize, VERIFY_CODES); } /** * 使用指定源生成验证码 * * @param verifySize 验证码长度 * @param sources 验证码字符源 * @return */ public static String generateVerifyCode(int verifySize, String sources) { // 未设定展示源的字码,赋默认值大写字母+数字 if (sources == null || sources.length() == 0) { sources = VERIFY_CODES; } int codesLen = sources.length(); Random rand = new Random(System.currentTimeMillis()); StringBuilder verifyCode = new StringBuilder(verifySize); for (int i = 0; i < verifySize; i++) { verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1))); } return verifyCode.toString(); } /** * 生成随机验证码文件,并返回验证码值 (生成图片形式,用的较少) * * @param w * @param h * @param outputFile * @param verifySize * @return * @throws IOException */ public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException { String verifyCode = generateVerifyCode(verifySize); outputImage(w, h, outputFile, verifyCode); return verifyCode; } /** * 生成指定验证码图像文件 * * @param w * @param h * @param outputFile * @param code * @throws IOException */ public static void outputImage(int w, int h, File outputFile, String code) throws IOException { if (outputFile == null) { return; } File dir = outputFile.getParentFile(); //文件不存在 if (!dir.exists()) { //创建 dir.mkdirs(); } try { outputFile.createNewFile(); FileOutputStream fos = new FileOutputStream(outputFile); outputImage(w, h, fos, code); fos.close(); } catch (IOException e) { throw e; } } /** * 输出指定验证码图片流 * * @param w * @param h * @param os * @param code * @throws IOException */ public static void outputImage(int w, int h, OutputStream os, String code) throws IOException { int verifySize = code.length(); BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Random rand = new Random(); Graphics2D g2 = image.createGraphics(); g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); // 创建颜色集合,使用java.awt包下的类 Color[] colors = new Color[5]; Color[] colorSpaces = new Color[]{Color.WHITE, Color.CYAN, Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.YELLOW}; float[] fractions = new float[colors.length]; for (int i = 0; i < colors.length; i++) { colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)]; fractions[i] = rand.nextFloat(); } Arrays.sort(fractions); // 设置边框色 g2.setColor(Color.GRAY); g2.fillRect(0, 0, w, h); Color c = getRandColor(200, 250); // 设置背景色 g2.setColor(c); g2.fillRect(0, 2, w, h - 4); // 绘制干扰线 Random random = new Random(); // 设置线条的颜色 g2.setColor(getRandColor(160, 200)); for (int i = 0; i < 20; i++) { int x = random.nextInt(w - 1); int y = random.nextInt(h - 1); int xl = random.nextInt(6) + 1; int yl = random.nextInt(12) + 1; g2.drawLine(x, y, x + xl + 40, y + yl + 20); } // 添加噪点 // 噪声率 float yawpRate = 0.05f; int area = (int) (yawpRate * w * h); for (int i = 0; i < area; i++) { int x = random.nextInt(w); int y = random.nextInt(h); // 获取随机颜色 int rgb = getRandomIntColor(); image.setRGB(x, y, rgb); } // 添加图片扭曲 shear(g2, w, h, c); g2.setColor(getRandColor(100, 160)); int fontSize = h - 4; Font font = new Font("Algerian", Font.ITALIC, fontSize); g2.setFont(font); char[] chars = code.toCharArray(); for (int i = 0; i < verifySize; i++) { AffineTransform affine = new AffineTransform(); affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize / 2, h / 2); g2.setTransform(affine); g2.drawChars(chars, i, 1, ((w - 10) / verifySize) * i + 5, h / 2 + fontSize / 2 - 10); } g2.dispose(); ImageIO.write(image, "jpg", os); } /** * 随机颜色 * * @param fc * @param bc * @return */ private static Color getRandColor(int fc, int bc) { if (fc > 255) { fc = 255; } if (bc > 255) { bc = 255; } int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } private static int getRandomIntColor() { int[] rgb = getRandomRgb(); int color = 0; for (int c : rgb) { color = color << 8; color = color | c; } return color; } private static int[] getRandomRgb() { int[] rgb = new int[3]; for (int i = 0; i < 3; i++) { rgb[i] = random.nextInt(255); } return rgb; } private static void shear(Graphics g, int w1, int h1, Color color) { shearX(g, w1, h1, color); shearY(g, w1, h1, color); } private static void shearX(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(2); boolean borderGap = true; int frames = 1; int phase = random.nextInt(2); for (int i = 0; i < h1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(0, i, w1, 1, (int) d, 0); if (borderGap) { g.setColor(color); g.drawLine((int) d, i, 0, i); g.drawLine((int) d + w1, i, w1, i); } } } private static void shearY(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(40) + 10; // 50; boolean borderGap = true; int frames = 20; int phase = 7; for (int i = 0; i < w1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(i, 0, 1, h1, 0, (int) d); if (borderGap) { g.setColor(color); g.drawLine(i, (int) d, i, 0); g.drawLine(i, (int) d + h1, i, h1); } } } }
教师信息菜单的主界面的HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>教师信息管理系统</title> <style> a{ text-decoration: none; color:#2F4F4F; } #logout{ position:fixed; top:10px; right: 10px; color:#000000; } #icon{ position:fixed; top:14px; right: 93px; } </style> </head> <div id="app"> <template> <div> <el-container style="height: 700px; border: 1px solid #eee"> <el-header style="font-size:40px; background-color: rgb(238, 241, 246)"> <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.SzoEPcHa2d3LVyyPjIxHLwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" width="5%" height="90%"/> <font color="#6495ed" size="8dp"> 教师信息管理系统 </font> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16" id="icon"> <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z"/> <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/> </svg> <a href="login.jsp" id="logout" style="font-size: 20px;">安全退出</a> </el-header> <el-container> <el-aside width="230px" style="border: 1px solid #eee"> <el-menu :default-openeds="['1','2','3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>教师信息管理</template> <el-menu-item index="1-1"> <a href="admin.html">教师信息管理</a> </el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-message"></i>部门信息管理</template> <el-menu-item index="2-1"> <a href="department.html">部门信息管理</a> </el-menu-item> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-message"></i>教师工资管理</template> <el-menu-item index="3-1"> <a href="salary.html">教师工资管理</a> </el-menu-item> <el-menu-item index="3-2"> <a href="set.html">设置教师工资</a> </el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <!--搜索表单--> <el-form :inline="true" :model="teacher" class="demo-form-inline"> <el-form-item label="教师名称"> <el-input v-model="teacher.employee_name" placeholder="请输入教师名称"></el-input> </el-form-item> <el-form-item label="教师职称"> <el-input v-model="teacher.position" placeholder="请输入教师职称"></el-input> </el-form-item> <el-form-item label="教师学历"> <el-input v-model="teacher.education" placeholder="请输入教师学历"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">搜索</el-button> </el-form-item> </el-form> <!--按钮--> <el-row> <el-button type="danger" plain @click="deleteByIds">批量删除</el-button> <el-button type="primary" plain @click="dialogVisible = true">新增</el-button> </el-row> <!--添加数据对话框表单--> <el-dialog title="编辑教师信息" :visible.sync="dialogVisible" width="30%" > <el-form ref="form" :model="teacher" label-width="80px"> <el-form-item label="教师编号" prop="employee_id"> <el-input v-model="teacher.employee_id"></el-input> </el-form-item> <el-form-item label="教师姓名" prop="employee_name"> <el-input v-model="teacher.employee_name"></el-input> </el-form-item> <el-form-item label="教师年龄" prop="age"> <el-input v-model="teacher.age"></el-input> </el-form-item> <el-form-item label="教师性别" prop="gender"> <el-radio-group v-model="teacher.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="婚姻状态" prop="marital_status"> <el-radio-group v-model="teacher.marital_status"> <el-radio label="未婚"></el-radio> <el-radio label="已婚"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="政治面貌" prop="political_status"> <el-select v-model="teacher.political_status" placeholder="请选择政治面貌"> <el-option label="群众" value="群众"></el-option> <el-option label="团员" value="团员"></el-option> <el-option label="党员" value="党员"></el-option> </el-select> </el-form-item> <el-form-item label="教师学历" prop="education"> <el-input v-model="teacher.education"></el-input> </el-form-item> <el-form-item label="部门编号" prop="dept_id"> <el-input v-model="teacher.dept_id"></el-input> </el-form-item> <el-form-item label="教师职务" prop="position"> <el-input v-model="teacher.position"></el-input> </el-form-item> <el-form-item label="联系方式" prop="contact"> <el-input v-model="teacher.contact"></el-input> </el-form-item> <el-form-item label="个人备注" prop="note"> <el-input type="textarea" v-model="teacher.note"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="addTeacher">立即创建</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> <template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="employee_id" label="教师编号" align="center" > <template slot-scope="scope" > <div slot="reference" class="name-wrapper"> <div class="b1" @click="teacherDetail(scope.$index, scope.row)" align="center"> {{ scope.row.employee_id }} </div> </div> </el-popover> </template> </el-table-column> <el-table-column prop="employee_name" label="教师名称" align="center" > </el-table-column> <el-table-column prop="position" label="教师职称" align="center" > </el-table-column> <el-table-column prop="contact" label="联系方式" align="center" > </el-table-column> <el-table-column align="center" label="操作"> <template slot-scope="scope"> <el-button type="primary" plain @click="updateById(scope.$index, scope.row)">修改</el-button> <el-button type="danger" plain @click="deleteById(scope.$index, scope.row)">删除</el-button> <!--修改数据的对话框表单--> <el-dialog title="修改教师信息" :visible.sync="centerVisible" width="30%" > <el-form ref="form" :model="teacher" label-width="80px"> <el-form-item label="教师编号" prop="employee_id"> <el-input v-model="teacher.employee_id"></el-input> </el-form-item> <el-form-item label="教师姓名" prop="employee_name"> <el-input v-model="teacher.employee_name"></el-input> </el-form-item> <el-form-item label="教师年龄" prop="age"> <el-input v-model="teacher.age"></el-input> </el-form-item> <el-form-item label="教师性别" prop="gender"> <el-radio-group v-model="teacher.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="婚姻状态" prop="marital_status"> <el-radio-group v-model="teacher.marital_status"> <el-radio label="未婚"></el-radio> <el-radio label="已婚"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="政治面貌" prop="political_status"> <el-select v-model="teacher.political_status" placeholder="请选择政治面貌"> <el-option label="群众" value="群众"></el-option> <el-option label="团员" value="团员"></el-option> <el-option label="党员" value="党员"></el-option> </el-select> </el-form-item> <el-form-item label="教师学历" prop="education"> <el-input v-model="teacher.education"></el-input> </el-form-item> <el-form-item label="部门编号" prop="dept_id"> <el-input v-model="teacher.dept_id"></el-input> </el-form-item> <el-form-item label="教师职务" prop="position"> <el-input v-model="teacher.position"></el-input> </el-form-item> <el-form-item label="联系方式" prop="contact"> <el-input v-model="teacher.contact"></el-input> </el-form-item> <el-form-item label="个人备注" prop="note"> <el-input type="textarea" v-model="teacher.note"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="edit">提交</el-button> <el-button @click="cancelEdit">取消</el-button> </el-form-item> </el-form> </el-dialog> </template> </el-table-column> </el-table> </template> <!--分页工具条--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> <hr/> <div style="text-align: center; width: 100%; font-size: 12px; color: #333;">©版权所有:石家庄铁道大学信息科学与技术学院 ©版权所有:石家庄铁道大学信息科学与技术学院 ©版权所有:石家庄铁道大学信息科学与技术学院 ©版权所有:石家庄铁道大学信息科学与技术学院</div> </el-main> </el-container> </el-container> </div> </template> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/axios-0.18.0.js"></script> <script> new Vue({ el: "#app", mounted() { //当页面加载完成后,发送异步请求,获取数据 this.selectAll(); }, methods: { // 查询分页数据 selectAll(){ axios({ method:"post", url:"http://localhost:8080/teacherMis/teacher/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize, data:this.teacher }).then(resp =>{ //设置表格数据 this.tableData = resp.data.rows; // {rows:[],totalCount:100} //设置总记录数 this.totalCount = resp.data.totalCount; }) }, //带状态表格 tableRowClassName({row, rowIndex}) { if (rowIndex === 1) { return 'success-row'; } else { return 'success-row'; } return ''; }, //分页 handleSizeChange(val) { // 重新设置每页显示的条数 this.pageSize = val; this.selectAll(); }, handleCurrentChange(val) { // 重新设置当前页码 this.currentPage = val; this.selectAll(); }, // 复选框选中后执行的方法 handleSelectionChange(val) { this.multipleSelection = val; }, //辅助数据类 initTeacher() { this.teacher.employee_id=''; this.teacher.employee_name=''; this.teacher.age=''; this.teacher.gender=''; this.teacher.marital_status=''; this.teacher.political_status=''; this.teacher.education=''; this.teacher.dept_id=''; this.teacher.position=''; this.teacher.contact=''; this.teacher.note=''; }, //辅助数据搜索类 initFruitAndSearch() { this.teacher.employee_id=''; this.teacher.employee_name=''; this.teacher.age=''; this.teacher.gender=''; this.teacher.marital_status=''; this.teacher.political_status=''; this.teacher.education=''; this.teacher.dept_id=''; this.teacher.position=''; this.teacher.contact=''; this.teacher.note=''; }, // 添加数据 addTeacher() { var _this = this; // 发送ajax请求,添加数据 axios({ method:"post", url:"http://localhost:8080/teacherMis/teacher/addTeacher", data:_this.teacher }).then(function (resp) { if(resp.data == "success"){ //添加成功 //关闭窗口 _this.dialogVisible = false; _this.initTeacher(); _this.selectAll(); // 弹出消息提示 _this.$message({ message: '恭喜你,添加成功', type: 'success' }); } }) }, // 删除 deleteById(index, row) { // 弹出确认提示框 this.$confirm('此操作将删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //用户点击确认按钮 //2. 发送AJAX请求 var _this = this; // 发送ajax请求,添加数据 axios({ method: "post", url: "http://localhost:8080/teacherMis/teacher/deleteById", data: row.employee_id }).then(function (resp) { if (resp.data == "success") { //删除成功 // 重新查询数据 _this.selectAll(); // 弹出消息提示 _this.$message({ message: '恭喜你,删除成功', type: 'success' }); } }) }).catch(() => { //用户点击取消按钮 this.$message({ type: 'info', message: '已取消删除' }); }); }, //对最新的赋值 updateById(index, row) { this.teacher_.employee_id=this.teacher.employee_id; this.teacher_.employee_name=this.teacher.employee_name; this.teacher_.age=this.teacher.age; this.teacher_.gender=this.teacher.gender; this.teacher_.marital_status=this.teacher.marital_status; this.teacher_.political_status=this.teacher.political_status; this.teacher_.education=this.teacher.education; this.teacher_.dept_id=this.teacher.dept_id; this.teacher_.position=this.teacher.position; this.teacher_.contact=this.teacher.contact; this.teacher_.note=this.teacher.note; this.teacher.employee_id=row.employee_id; this.teacher.employee_name=row.employee_name; this.teacher.age=row.age; this.teacher.gender=row.gender; this.teacher.marital_status=row.marital_status; this.teacher.political_status=row.political_status; this.teacher.education=row.education; this.teacher.dept_id=row.dept_id; this.teacher.position=row.position; this.teacher.contact=row.contact; this.teacher.note=row.note; this.centerVisible = true; }, //修改数据的部分内容 edit() { var _this = this; //发送ajax异步请求,添加数据 axios({ method: "post", url: "http://localhost:8080/teacherMis/teacher/updateById", data: _this.teacher }).then(function (resp) { if (resp.data == "success") { //关闭窗口 _this.centerVisible = false; //查询一次 _this.initTeacher(); _this.selectAll(); _this.$message({ message: '恭喜你,修改数据成功', type: 'success' }); } else { _this.$message.error('修改数据失败'); } }) }, cancelEdit(){ this.teacher.employee_id=this.teacher_.employee_id; this.teacher.employee_name=this.teacher_.employee_name; this.teacher.age=this.teacher_.age; this.teacher.gender=this.teacher_.gender; this.teacher.marital_status=this.teacher_.marital_status; this.teacher.political_status=this.teacher_.political_status; this.teacher.education=this.teacher_.education; this.teacher.dept_id=this.teacher_.dept_id; this.teacher.position=this.teacher_.position; this.teacher.contact=this.teacher_.contact; this.teacher.note=this.teacher_.note; this.centerVisible =false; }, // 批量删除 deleteByIds(){ // 弹出确认提示框 this.$confirm('此操作将删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //用户点击确认按钮 //1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可 for (let i = 0; i < this.multipleSelection.length; i++) { let selectionElement = this.multipleSelection[i]; this.selectedIds[i] = selectionElement.employee_id; } //2. 发送AJAX请求 var _this = this; // 发送ajax请求,添加数据 axios({ method:"post", url: "http://localhost:8080/teacherMis/teacher/deleteByIds", data:_this.selectedIds }).then(function (resp) { if(resp.data == "success"){ //删除成功 // 重新查询数据 _this.selectAll(); // 弹出消息提示 _this.$message({ message: '恭喜你,删除成功', type: 'success' }); } }) }).catch(() => { //用户点击取消按钮 this.$message({ type: 'info', message: '已取消删除' }); }); }, //搜索表单 onSubmit(){ this.selectAll(); }, teacherDetail(index, row) { window.open("http://localhost:8080/teacherMis/teacher/teacherDetail?id="+row.employee_id); //window.open("https://www.runoob.com"); } }, data() { return { // 每页显示的条数 pageSize: 5, // 总记录数 totalCount: 100, // 当前页码 currentPage: 1, // 添加数据对话框是否展示的标记 dialogVisible: false, centerVisible: false, // 模型数据 teacher: { employee_id: '', employee_name: '', age: '', gender: '', marital_status: '', political_status: '', education: '', dept_id: '', position: '', contact: '', note: '' }, //辅助修改的复制数据 teacher_: { employee_id: '', employee_name: '', age: '', gender: '', marital_status: '', political_status: '', education: '', dept_id: '', position: '', contact: '', note: '' }, // 被选中的id数组 selectedIds: [], // 复选框选中数据集合 multipleSelection: [], //表格数据 tableData: [{ employee_id: '1', employee_name: '阿旭', age: '21', gender: '男', marital_status: '未婚', political_status: '团员', education: '本科毕业', dept_id: '1', position: '职员', contact: '111111', note: '无' }, { employee_id: '1', employee_name: '阿旭', age: '21', gender: '男', marital_status: '未婚', political_status: '团员', education: '本科毕业', dept_id: '1', position: '职员', contact: '111111', note: '无' }, { employee_id: '1', employee_name: '阿旭', age: '21', gender: '男', marital_status: '未婚', political_status: '团员', education: '本科毕业', dept_id: '1', position: '职员', contact: '111111', note: '无' }, { employee_id: '1', employee_name: '阿旭', age: '21', gender: '男', marital_status: '未婚', political_status: '团员', education: '本科毕业', dept_id: '1', position: '职员', contact: '111111', note: '无' }] } } }) </script> </body> </html>
欢迎大家可以给出修改意见