vue-element之学生信息表格（详细代码）

效果图如下：

删除

添加

修改

模糊查询

表格样式

代码如下：


<template><div><el-card class="box-card"><!-- <搜索> --><el-row><!-- v-model="queryInfo.query" --><el-inputv-model="query"placeholder="请输入内容"clearablestyle="width: 250px;font-size:20px;font-weight:bold"class="search"@clear="fetchdata"/><el-buttontype="primary"icon="el-icon-search"style="font-size:20px;font-weight:bold;margin-left:10px"round@click="fetchdata">搜索</el-button><el-buttontype="primary"roundstyle="font-size:20px;font-weight:bold;margin-left:10px"@click="addDialogVisible=true">添加用户</el-button><div style="margin-top:20px" /></el-row><el-table:data="tables.slice((pagenum-1)*pageSize,pagenum*pageSize)"cell-class-name="cell-class-name"bgcolor="black"cellspacing="0"cellpadding="0":cell-style="tablescolor"style="width: 100%;font-size:23px;font-weight:bold;":header-cell-style="tableheader"borderborder-color="black"fithighlight-current-row><el-table-column type="index" width="100px" align="center" label="序号" /><!-- <el-table-column prop="id" label="编号" align="center" width="200px" /> --><el-table-column prop="account" label="学号" align="center" width="300px" /><el-table-column prop="account_name" label="姓名" align="center" width="100px" /><el-table-column prop="pass" label="学历" align="center" width="200px" /><el-table-column prop="account_type" label="成绩等级" align="center" width="150px" /><el-table-column prop="identity_id" label="身份证号码" align="center" width="300px" /><el-table-column prop="phone" label="联系电话" align="center" width="200px" /><el-table-columnlabel="操作"align="center"width="319px"class-name="small-padding fixed-width"><template slot-scope="scope"><el-button type="primary" style="font-size:20px;font-weight:bold" @click="handleUpdate(scope.row)">修改</el-button><el-buttontype="danger"style="font-size:20px;font-weight:bold"@click="handleDelete(scope.row.id,index)">删除</el-button></template></el-table-column></el-table><!-- <添加用户的对话框> --><el-dialogtitle="添加账户":visible.sync="addDialogVisible"width="50%"style="font-size:20px;font-weight:bold"@close="addDialogClosed"><!-- <内容主题区> --><el-form ref="addFormRef" :model="addForm" :rules="addFormrules" label-width="100px" style="font-size:20px;font-weight:bold"><!-- <el-form-item label="编号" prop="id"><el-input v-model="addForm.id" /></el-form-item> --><el-form-item label="学号" prop="account_name"><el-input v-model="addForm.account_name" /></el-form-item><el-form-item label="姓名" prop="account"><el-input v-model="addForm.account" /></el-form-item><el-form-item label="学历" prop="pass"><el-select v-model="addForm.pass" placeholder="请选择学历"><el-optionv-for="item in options1":key="item.value":label="item.label":value="item.label"/></el-select></el-form-item><el-form-item label="成绩等级" prop="account_type"><el-select v-model="addForm.account_type" placeholder="请选择成绩等级"><el-optionv-for="item in options2":key="item.value":label="item.label":value="item.label"/></el-select></el-form-item><el-form-item label="身份证号码" prop="identity_id"><el-input v-model="addForm.identity_id" /></el-form-item><el-form-item label="联系电话" prop="phone"><el-input v-model="addForm.phone" /></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button style="font-size:20px;font-weight:bold" type="primary" round @click="addDialogVisible = false">取 消</el-button><el-button style="font-size:20px;font-weight:bold" type="primary" round @click="addconfirm">确 定</el-button></span></el-dialog><!-- @close="editDialogClosed" 实现修改账户的重置操作--><!-- <修改用户对话框> --><el-dialogtitle="修改信息":visible.sync="editDialogVisible"style="font-size:20px;font-weight:bold"width="50%"><el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px"><!-- <el-form-item label="编号"><el-input v-model="editForm.id" disabled /></el-form-item> --></el-form><el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px"><el-form-item label="学号" prop="account_name"><el-input v-model="editForm.account_name" /></el-form-item></el-form><el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px"><el-form-item label="姓名" prop="account"><el-input v-model="editForm.account" /></el-form-item></el-form><el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px"><el-form-item label="学历" prop="pass"><el-select v-model="editForm.pass" placeholder="请选择学历"><el-optionv-for="item in options1":key="item.value":label="item.label":value="item.label"/></el-select></el-form-item></el-form><el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="90px"><el-form-item label="成绩等级" prop="account_type"><el-select v-model="editForm.account_type" placeholder="请选择成绩等级"><el-optionv-for="item in options2":key="item.value":label="item.label":value="item.label"/></el-select></el-form-item></el-form><el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="100px"><el-form-item label="身份证号码" prop="identity_id"><el-input v-model="editForm.identity_id" /></el-form-item></el-form><el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="80px"><el-form-item label="联系电话" prop="phone"><el-input v-model="editForm.phone" /></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button type="primary" round @click="editDialogVisible = false">取 消</el-button><el-button type="primary" round @click="editUserInfo">确 定</el-button></span></el-dialog><!-- <分页区域> --><el-paginationstyle="font-size:20px;font-weight:bold":current-page="pagenum":page-sizes="pageSizes":page-size="pageSize"backgroundlayout="total,sizes, prev, pager, next, jumper"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></el-card></div></template><script>import axios from 'axios'// import pagination from '../../components/pagination.vue'export default {data() {// 验证电话号码的规则自定义var checkphone = (rule, value, cb) => {// 验证电话号码的正则表达式const regphone = /^(0|86|17951)?(13[0~9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/if (regphone.test(value)) {return cb()}cb(new Error('请输入合法的电话号码'))}return {list: null,tableData: [],// 获取列表的参数对象query: '',// 当前的页数pagenum: 1,// 当前每页显示多少条数据pageSize: 10,// 个数选择器pageSizes: [3, 5, 10]，total: 0,editDialogVisible: false,editForm: {id: '',account_name: '',account: '',pass: '',account_type: '',identity_id: '',phone: ''},// 控制添加对话框addDialogVisible: false,addForm: {id: '',account_name: '',account: '',pass: '',account_type: '',identity_id: '',phone: ''},// 添加表单的验证规则对象addFormrules: {account_name: [{ required: true, message: '请输入学号', trigger: 'blur'},{min: 2,max: 20,message: '学号的长度在2~20个字符',trigger: 'blur'}],account: [{ required: true, message: '请输入姓名', trigger: 'blur'},{min: 2,max: 20,message: '姓名的长度在2~20个字符',trigger: 'blur'}],pass: [{ required: true, message: '请选择学历', trigger: 'blur'},{trigger: 'blur'}],account_type: [{ required: true, message: '请选择成绩等级', trigger: 'blur'},{trigger: 'blur'}],identity_id: [{ required: true, message: '请输入身份证号码', trigger: 'blur'},{min: 18,max: 18,message: '身份证的长度为18个字符',trigger: 'blur'}],phone: [{ required: true, message: '请输入电话号码', trigger: 'blur'},{min: 11,max: 11,message: '电话号码的长度为11个字符',trigger: 'blur'},{ validator: checkphone, trigger: 'blur' }]},// 修改表单的验证规则对象editFormrules: {account_name: [{ required: true, message: '请输入学号', trigger: 'blur'},{min: 2,max: 10,message: '学号的长度在2~10个字符',trigger: 'blur'}],account: [{ required: true, message: '请输入姓名', trigger: 'blur'},{min: 2,max: 10,message: '姓名的长度在2~10个字符',trigger: 'blur'}],pass: [{ required: true, message: '请选择学历', trigger: 'blur'},{trigger: 'blur'}],account_type: [{ required: true, message: '请选择成绩等级', trigger: 'blur'},{trigger: 'blur'}],identity_id: [{ required: true, message: '请输入身份证号码', trigger: 'blur'},{min: 18,max: 18,message: '身份证的长度为18个字符',trigger: 'blur'}],phone: [{ required: true, message: '请输入电话号码', trigger: 'blur'},{min: 11,max: 11,message: '电话号码的长度为11个字符',trigger: 'blur'}]},options1: [{value: '选项1',label: '小学'}, {value: '选项2',label: '初中'}, {value: '选项3',label: '高中/职中/中专'}, {value: '选项4',label: '大学专科'}, {value: '选项5',label: '大学本科'}, {value: '选项6',label: '研究生'}, {value: '选项7',label: '硕士'}, {value: '选项8',label: '博士'}, {value: '选项5',label: '博士后'}],value: '',options2: [{value: '选项1',label: '优秀'}, {value: '选项2',label: '良好'}, {value: '选项3',label: '及格'}, {value: '选项4',label: '不及格'}]}},// 实现模糊查询computed: {tables() {const query = this.queryif (query) {// console.log('输入的搜索内容：' + this.query)return this.tableData.filter(data => {// console.log('object:' + Object.keys(data))return Object.keys(data).some(key => {return String(data[key]).toLowerCase().indexOf(query) > -1})})}return this.tableData}},mounted() {this.fetchdata()},methods: {// 获取后端数据，采用的是mock数据。mock平台地址：fastmock 在线接口 Mock 平台async fetchdata() {axios.get('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/classinfo').then((response) => {console.log(response)this.tableData = response.data.datathis.total = response.data.data.length})},tablescolor() {return 'border-color:black; border:1px solid black;border-collapse:collapse'},tableheader() {return 'background:#2c8DF4;color:white;border-color:black; border:1px solid black;'},// 修改用户信息并提交editUserInfo() {this.$refs.editFormRef.validate(valid => {if (!valid) return// 发起修改用户信息的数据请求/axios.put('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + this.editForm.id, {//   account_name: this.editForm.account_name,//   account: this.editForm.account,//   pass: this.editForm.pass,//   account_type: this.editForm.account_type,//   identity_id: this.editForm.identity_id,//   phone: this.editForm.phone// })// if (res.status !== 200) {//   return this.$message.error('更新用户信息失败！')// }// 关闭对话框this.editDialogVisible = false// 刷新数据列表// this.fetchdata()// 提升修改成功this.$message.success('更新用户信息成功！')})},// 监听pagesize改变的事件handleSizeChange(newsize) {this.pageSize = newsizethis.pagenum = 1this.fetchdata()},// 监听 页码值 改变的事件handleCurrentChange(newPage) {this.pagenum = newPagethis.fetchdata()},// 修改用户信息async handleUpdate(row) {// console.log(row)// const { data: res } = await axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + row)// if (res.status !== 200) {//   return this.$message.error('查询用户信息失败！')// }// this.editForm = res.data.data// this.editForm = Object.assign({}, row)// this.dialogStatus = 'update'this.editDialogVisible = truethis.editForm = row},handleDelete(_row, index) {this.$notify({title: '成功',message: '删除成功',type: 'success',duration: 2000})this.tableData.splice(index, 1)// axios.delete('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + id)//   .then(resp => {//     if (resp.status === 200) {//       alert('删除成功')//       this.fetchdata()//     } else {//       alert('删除失败')//     }//   })},// 修改用户框关闭事件实现修改账户的重置操作// editDialogClosed() {//   this.$refs.editFormRef.resetFields()// },// 添加用户框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields()},// 点击按钮添加新用户addconfirm() {this.$refs.addFormRef.validate(async valid => {if (valid) {axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park', this.addForm).then(res => {if (res.status === 200) {alert('添加成功')this.addForm = {}this.addDialogVisible = falsethis.fetchdata()} else {alert('添加失败')}}).catch(error => console.log(error))} else { alert('校验失败') }// if (!valid) return// console.log(valid)// 请求发起添加用户的请求// const { data: res } = await// axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park', { params: { addForm: this.addForm }})//   .then(res => {//     if (res.status !== 200) {//       this.$message.error('添加用户失败')//     }//     this.$message.success('添加用户成功！')//     // 隐藏添加用户的对话款//     console.log(res.data.data)//     this.tableData = res.data.data//     this.addDialogVisible = false//     this.$set(this.tableData, this.addForm.value, res.data.data)//     // 重新获取用户的列表信息//     this.fetchdata()//   })})}}}</script><style scoped>/* .el-pagination {margin-top: 15px;}.el-table--border th,.el-table--border td{border-color:blue;}.el-table{color:#000000;} */</style>

vue-element之学生信息表格（详细代码）相关推荐

python输入学生姓名_python学生信息管理系统实现代码
1.本人第一次学python做出来的,当时满满的成就感,当作纪念!!!!! 非常简单,复制即可使用代码块 import json#把字符串类型的数据转换成Python基本数据类型或者将Python基 ...
html-优秀学生信息表格
优秀学生信息表格如何用html实现下图所示的优秀学生信息表: 首先,观察该表的表格的结构标签: 1.表标题:优秀学生信息表格,用caption 2.表头单元格:年纪,姓名,学号,班级,加粗表示,用 ...
html制作一张学生信息表格,HTML的嵌入式精美学生表格代码
HTML的嵌入式精美学生表格代码 Contributor:国民老公45 Type:代码 Date time:2019-11-06 20:35:07 Favorite:4 Score:2 返回上页 Re ...
vue element项目常见实现表格内部可编辑功能
目录前言正文 1.简单表格行内内部可编辑 2. 数据从后端取得表格行内可编辑 3.批量表格整体的可编辑结语前言后台系统都是各种表格表单编辑,整理了下常见的几种实现表格编辑的方式,希望有用.使 ...
C++学生信息管理系统(纯代码)
学生成绩分析系统设计一个对学生成绩进行分析的程序程序,实现一个班级的学生成绩进行排序.求平均分, 求最高分.最低分以及个分数段的人数进行统计等功能.并实现输出分析结果. 实现的功能: 1.实现学生成 ...
学生考勤日期链表排序c语言,【C项目】文件,结构体,链表,排序, 学生信息管理系统(示例代码)...
1.密码登录: 2.通过键盘输入学生信息,包括学生学号.姓名.成绩: 3.将输入的信息保存到指定文件中: 4.从文件中读取学生信息: 5.显示全部学生信息: 6.按学生总分进行降序排序: 7.删除学生 ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
Vue响应式原理（含详细代码）
Vue响应式原理介绍监听Vue实例中的data选项,我们以下用一个普通的js对象模拟data,用Object.defineProperty进行定义属性值的getter和setter方法.当data选 ...

vue-element之学生信息表格（详细代码）

vue-element之学生信息表格（详细代码）相关推荐

最新文章

热门文章