Vue + Vue-router + Element-ui 实现研究生管理系统中的“学生类型”页面功能实现

最新推荐文章于 2024-07-02 17:53:04 发布
最新推荐文章于 2024-07-02 17:53:04 发布
阅读量848 收藏 6
点赞数
分类专栏： 研究生后台管理系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43905448/article/details/88898935
版权

项目为整个研究生管理系统，下面提供项目中“学生类型”页面的vue文件源代码：页面功能包括：

  1. el-dialog对话框嵌套表单（form）
  2. form中的el-input,el-select的验证（rules）
  3. form的reset方法（resetForm）
  4. Pagination 分页
  5. el-table 的多选功能

vue源代码：

<template>
  <div class="studentType">
    <!-- 添加学生类型对话框 -->
    <el-dialog title="添加研究生类型" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="form" label-position="right" >
        <el-form-item label="类型代码" prop="typeNum" :label-width="formLabelWidth">
          <el-input v-model="form.typeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学位类型代码" prop="degreeNum" :label-width="formLabelWidth">
          <el-input v-model="form.degreeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="层次" prop="level" :label-width="formLabelWidth">
          <el-select v-model="form.level" collapse-tags placeholder="选择层次">
              <el-option label="硕士" value="master"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
        <el-button type="primary" @click="clickAddStudent('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改学生类型 -->
    <el-dialog title="修改学生类型" :visible.sync="updialogVisible" width="600px">
      <el-form :model="upform" :rules="rules" ref="upform" label-position="right">
        <el-form-item label="类型代码" prop="typeNum" :label-width="formLabelWidth">
          <el-input v-model="upform.typeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="upform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学位类型代码" prop="degreeNum" :label-width="formLabelWidth">
          <el-input v-model="upform.degreeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="层次" prop="level" :label-width="formLabelWidth">
          <el-select v-model="upform.level" collapse-tags placeholder="选择层次">
              <el-option label="硕士" value="master"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('upform')">重置</el-button>
        <el-button type="primary" @click="clickUpStudent('upform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 课程类型设置 -->
        <el-dialog title="设置课程类型" :visible.sync="classdialogVisible" width="600px">
      <el-form :model="form" :rules="classrules" ref="classform" label-position="right" >
        <el-form-item label="类型编号" prop="classTypeNum" :label-width="formLabelWidth">
          <el-input v-model="classform.classTypeNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="classTypeName" :label-width="formLabelWidth">
          <el-input v-model="classform.classTypeName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否必修" prop="relearn" :label-width="formLabelWidth">
          <el-select v-model="classform.relearn" collapse-tags placeholder="是/否">
              <el-option label="是" value="ddddd"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="classdialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('classform')">重置</el-button>
        <el-button type="primary" @click="clickSetClass('classform')">确 定</el-button>
      </div>
    </el-dialog>

    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 学生类型
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="studentType__upbtn">
        <div>
          <el-button type @click="addstudent('form')">添加类型</el-button>
          <el-button type @click="setclass('classform')">课程类型设置</el-button>
        </div>
      </div>
      <el-table :data="studentTypeData" class="table" ref="multipleTable">
      <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="typeNum" label="类型代码" width="200" ></el-table-column>
        <el-table-column prop="name" label="类型名称" width="300"></el-table-column>
        <el-table-column prop="degreeNum" label="学位类型代码" width="200"></el-table-column>
        <el-table-column prop="level" label="层次" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="upstudent(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="opendel(scope.row)" type="text" style="color:red" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "studentType",
  data() {
    return {
      currentPage4: 1,
      dialogVisible: false,
      updialogVisible: false,
      classdialogVisible: false,
      formLabelWidth: "110px",
      studentTypeData: [
        {
          typeNum: "选项1",
          name: "黄金糕",
          degreeNum:"??",
          level:"!!"
        }],
      form: {
      typeNum: "",
      name: "",
      degreeNum: "",
      level:"",
      },
      upform: {
      typeNum: "",
      name: "",
      degreeNum: "",
      level:"",
      },
      classform:{
      classTypeNum:"",
      classTypeName:"",
      relearn:"",
      },
      rules: {
        typeNum: [{ required: true, message: "必填", trigger: "change" }],
        name: [{ required: true, message: "必填", trigger: "change" }],
        degreeNum: [{ required: true, message: "必填", trigger: "change" }],
        level: [{ required: true, message: "必填", trigger: "change" }],
      },
      classrules: {
        classTypeNum: [{ required: true, message: "必填", trigger: "change" }],
        classTypeName: [{ required: true, message: "必填", trigger: "change" }],
        relearn: [{ required: true, message: "必填", trigger: "change" }],
      }
    };
  },
  created() {},
  computed: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
   //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //添加学生
    addstudent(formName) {
      this.dialogVisible = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    //确认添加学生
    async clickAddStudent(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
            this.dialogVisible = false;
          alert('submit!');
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //设置课程类型
    setclass(formName) {
      this.classdialogVisible = true;
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    //确认设置课程类型
    async clickSetClass(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
            this.classdialogVisible = false;
          alert('submit!');
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //确认修改学生
    async clickUpStudent(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
            this.updialogVisible = false;
            alert('submit!');
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改学生
    upstudent(row) {
      this.upform = row;
      this.updialogVisible = true;
        if (this.$refs[this.upform] !== undefined) {
      this.$refs[this.upform].resetFields();
      }
    },
    //删除学生
    opendel(row) {
      this.$confirm("此操作将永久删除教室数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
// .scoreInquiry {
//   &__sebox {
//     &-selectCase {
//       span {
//         line-height: 32px;
//       }
//     }
//   }
// }
.studentType {
  &__upbtn {
    margin-bottom: 10px;
  }
  &__row {
    &-spanclass {
      font-size: 13px;
    }
  }
}
.el-select {
  width: 100%;
}
.el-row {
  width: 100%;
}
.el-col {
  margin-bottom: 10px;
  display: flex;
  span {
    line-height: 32px;
  }
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
</style>

page效果：

在这里插入图片描述
添加类型功能：
在这里插入图片描述
说明：点击重置则所有内容恢复至初始状态。

课程类型设置功能：
在这里插入图片描述
修改学生类型功能：
在这里插入图片描述
删除功能：
在这里插入图片描述

洋大槐
关注
专栏目录
Vue基本案例使用以及Vue+ElementUI+cp30连接池实现学生管理系统的增删改查
qq_42662411的博客
10-09 1148
Vue基本案例使用以及Vue+ElementUI+cp30连接池实现学生管理系统的增删改查 1-Vue基本用法 1.1 V-model进行双向事件的绑定 <!--1-v-model用来渲染 进行事件的交互--> <input type="text" v-model="message"> {{message}} 1.2 V-on:事件名称 进行事件的绑定 简化成@click=“方法名称()” <!-
Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“学生类型”（前端+后端数据）
洋大槐
04-02 461
项目为整个研究生管理系统，博客中已经提供“学生类型”页面的vue文件源代码，本文将对在vue文件中import api方法： 1.axios（引用源） axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR（XMLHttpRequest）的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征： 1.从浏览器中创建 ...
用MySQL+node+vue做一个学生信息管理系统（四）：制作增加、删除、修改的组件和对应的路由
最新发布
紫月i的博客
07-02 1915
1.下载依赖： npm install vue-router 在src目录下新建一个文件夹router，在router文件夹下新建一个文件router.js文件,在component目录下新建增加删除和修改的组件，引入router.js当中 此时的init组件为主页面（（二、三）的app.vue），app.vue只用来写路由占位符 router.js： import Vue from 'vue' import Router from 'vue-router/dist/vue-router.js' impor
18.Vue路由案例：学生管理系统
web_project的博客
06-28 255
Vue路由案例：学生管理系统
Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“考试档期”（前端+后端数据）
洋大槐
04-04 329
内容实现如题 1.examSchedule.vue <template> <div class="examSchedule"> <!-- 修改考试档期 --> <el-dialog title="修改考试档期" :visible.sync="updialogVisible" width="400px"> <el-for...
研究生管理系统源代码
07-23
基于C#和asp的研究生管理系统，仅供参考。里面主要有admin和普通用户两种权限，
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
基于Vue+Vue-router+Vuex+Element-ui+Axios商城
06-27
本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
首先，Vue-Router是Vue.js官方的路由管理器，它允许我们在单页面应用（SPA）中定义和管理不同的路由，实现页面间的平滑切换。通过设置路由规则，我们可以根据URL路径动态加载对应的组件，从而实现页面的无刷新跳转。...
基于vue+vue-router+vuex+element-ui+axios，参考小米商城，实现的电商项目，仿小米商城源代码
03-23
本项目前后端分离，前端基于`Vue`+`Vue-router`+`Vuex`+`Element-ui`+`Axios`，参考小米商城实现。后端基于`Node.js(Koa框架)`+`Mysql`实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于...
基于vue + element-ui的后台管理系统
10-19
本项目是vue + element-ui构建的后台管理系统，是后台项目node-elm的管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登陆、管理数据、权限验证等功能。 注：项目预览地址和接口需要使用...
研究生管理系统源码
10-22
这是老师让我们自己做的管理系统,里面是源码,没有说明文档,我写的比较简明易懂,初学者适用.
研究生管理信息系统源码
05-02
研究生管理信息系统源码
elementUi+vue+node+express+mongodb简易学生成绩管理系统
08-07
elementUi+vue+node+express+mongodb简易学生成绩管理系统,简易版，可以用来学习
vue+elementUI管理系统，页面源代码
11-10
vue2+elementUI后台管理系统，页面源代码，src和static目录
研究生日常管理系统源代码
02-24
研究生日常管理系统可以方便实现老师对学生平时任务完成情况的管理和督促，重点在学生端和老师端，学生端可以编辑自己的计划，任务进度和完成情况，老师端可以批阅自己学生的计划，系统还添加了成果管理功能，来保存学生和老师的个人成果。
学生管理系统Element UI版
热门推荐
专注于Java领域开发 关注我 带你玩转Java
03-16 2万+
学生管理系统Element UI版 前后端分离 增删改查一套 免费获取
学生管理系统（上）（Element版）
lcshen1234的博客
03-18 245
学生管理系统（Element版）
基于Vue和element-ui的学生信息系统小demo
qq_41903059的博客
03-19 350
<template > <div> <el-row type="flex"> <el-col :span="10"> <!-- ref：对虚拟DOM的一种命名 --> <el-form ref="formObj" :model="formObj" label-width="80px" :rules="rules"> <el-form-item label=
Vue+Element-UI分页实现详解
"本文主要探讨了在Vue.js框架中结合Element-UI组件库实现分页功能的问题，通过一个实际场景分析了如何在Vue项目中解决这个问题。作者在试图模仿ant-design-pro的设计风格时，遇到了文件体积过大、技术栈适应性以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值