基于vue和elementui的课程表

最新推荐文章于 2024-06-04 16:14:42 发布
最新推荐文章于 2024-06-04 16:14:42 发布
阅读量1.5k 收藏 12
点赞数 11
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43647219/article/details/130892740
版权

对大佬的代码改进了一下，结合了后端数据以及修复了单元格合并的bug，完整代码如下：

<template>
<el-card class="box-card" shadow="hover">
	<span>
		当前,第
		<el-select @change="changeValue" v-model="value" placeholder="1" class="m-2" size="small">
		    <el-option
		      v-for="item in options"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value"
		    />
			</el-select>
			周
	</span>

	  <el-divider />
      <el-table :data="timetable" :span-method="objectSpanMethod" border
                :header-cell-style="{background:'#d9e5fd', color:'black', fontWeight: 1000}"
                :cell-style="tableCellStyle"
				 style="overflow-x:hidden"
      >
        <el-table-column prop="sjd" label="时间段" width="120" align="center">
        </el-table-column>
        <el-table-column prop="jc" label="节次" width="120" align="center">
        </el-table-column>
        <el-table-column prop="mon" label="星期一" align="center">
          <template #default="scope">
            <h4>{{ scope.row.mon.lessonName }}</h4>
            <div v-html="scope.row.mon.place"></div>
          </template>
        </el-table-column>
        <el-table-column prop="tue" label="星期二" align="center">
          <template #default="scope">
            <h4>{{ scope.row.tue.lessonName }}</h4>
            <div v-html="scope.row.tue.place"></div>
          </template>
        </el-table-column>
        <el-table-column prop="wed" label="星期三" align="center">
          <template #default="scope">
            <h4>{{ scope.row.wed.lessonName }}</h4>
            <div v-html="scope.row.wed.place"></div>
          </template>
        </el-table-column>
        <el-table-column prop="thu" label="星期四" align="center">
          <template #default="scope">
            <h4>{{ scope.row.thu.lessonName }}</h4>
            <div v-html="scope.row.thu.place"></div>
          </template>
        </el-table-column>
        <el-table-column prop="fri" label="星期五" align="center">
          <template #default="scope">
            <h4>{{ scope.row.fri.lessonName }}</h4>
            <div v-html="scope.row.fri.place"></div>
          </template>
        </el-table-column>
        <el-table-column prop="sat" label="星期六" align="center">
          <template #default="scope">
            <h4>{{ scope.row.sat.lessonName }}</h4>
            <div v-html="scope.row.sat.place"></div>
          </template>
        </el-table-column>
        <el-table-column prop="sun" label="星期日" align="center">
          <template #default="scope">
            <h4>{{ scope.row.sun.lessonName }}</h4>
            <div v-html="scope.row.sun.place"></div>
          </template>
        </el-table-column>
      </el-table>
  </el-card>
</template>
<script>
import api from "../../api/index.js"
export default {
  data () {
    return {
	  options:[
		  {
		      value: 1,
		      label: 1,
		    },
		    {
		      value: 2,
		      label: 2,
		    },
		    {
		      value: 3,
		      label: 3,
		    },
		    {
		      value: 4,
		      label: 4,
		    },
		    {
		      value: 5,
		      label: 5,
		    },
			{
			    value: 6,
			    label: 6,
			  },
			  {
			    value: 7,
			    label: 7,
			  },
			  {
			    value: 8,
			    label: 8,
			  },
			  {
			    value: 9,
			    label: 9,
			  },
			  {
			    value: 10,
			    label: 10,
			  },
			  {
			      value: 11,
			      label: 11,
			    },
			    {
			      value: 12,
			      label: 12,
			    },
			    {
			      value: 13,
			      label: 13,
			    },
			    {
			      value: 14,
			      label: 14,
			    },
			    {
			      value: 15,
			      label: 15,
			    },
				{
				    value: 16,
				    label: 16,
				  },
				  {
				    value: 17,
				    label: 17,
				  },
				  {
				    value: 18,
				    label: 18,
				  },
				  {
				    value: 19,
				    label: 19,
				  },
				  {
				    value: 20,
				    label: 20,
				  },
	  ],
	  value: '',
	  length:11,
	  afternoonLength:4,
      timetable: [],
      events: [],
      hoverOrderArr: [],
      weeks: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
	  initTable:[],
	  temp: [null,null,null,null,null,null,null],
    }
  },
  mounted () {
	  let data={
	  	params:{
	  		studentId:this.$store.state.login_data.userSpecialInfo.studentInfo.studentId,
	  		currentWeek:1,
	  	}
	  };
	  api.getLessonInfo(data).then(res=>{
	  		this.events=res.data.data;
			this.mergeData();
	  });
	  
	  
    
  },
  // watch: {
  //   events: {
  //     handler (newVal, oldVal) {
  //       this.mergeData()
  //     },
  //     deep: true
  //   }
  // },
  created () {
    this.makeTimetable()
	this.initTable=this.timetable;
  },
  methods: {
	  changeValue(val){
		  console.log(val);
		  let data1={
		  	params:{
		  		studentId:this.$store.state.login_data.userSpecialInfo.studentInfo.studentId,
		  		currentWeek:val,
		  	}
		  };
		  api.getLessonInfo(data1).then(res=>{
				this.events=res.data.data;
				this.makeTimetable();
				this.mergeData();
		  		
		  });
	  },
    // 单元格添加背景色
	tableCellStyle ({ row, column, rowIndex, columnIndex } ) {
		if (row[column.property].lessonName !== undefined) {
			return {"background-color":"rgb(24 144 255 / 80%)","color": "#fff","border-radius":"10px"}
		}
	},
    // 构造课程表完整数据
    makeTimetable () {
      this.timetable = []
      for (let i = 0; i < this.length; i++) {
        let one = {
          sjd: '',
          jc: i + 1,
          mon: {},
          tue: {},
          wed: {},
          thu: {},
          fri: {},
          sat: {},
          sun: {}
        }
        if (i < 4) {
          one.sjd = '上午'
        } else if (i > 3 && i < (this.afternoonLength + 4)) {
          one.sjd = '下午'
        } else {
          one.sjd = '晚上'
        }
        this.timetable.push(one)
      }
    },
    mergeData(){

	   console.log(this.events);
	  
      // 合并数据
      if (this.events.length > 0) {
        for (let i = 0; i < this.events.length; i++) {
          // 获取星期几
          let week = this.weeks[this.events[i].week - 1]
          this.timetable[this.events[i].start - 1][week] = this.events[i]
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex < 4) {
          if (rowIndex === 0) {
            return {
              rowspan: 4,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        } else if (rowIndex > 3 && rowIndex < (4 + this.afternoonLength)) {
          if (rowIndex === 4) {
            return {
              rowspan: this.afternoonLength,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        } else {
          if (rowIndex === (4 + this.afternoonLength)) {
            return {
              rowspan: this.length - 4 - this.afternoonLength,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
      if (columnIndex === 2) {
        if (row.mon.lessonName !== undefined) {
			this.temp[0]=row.mon;
          return {
            rowspan: row.mon.end - row.mon.start + 1,
            colspan: 1
          }
        } else {
		  if(this.temp[0]==null){
			  return {
			    rowspan: 1,
			    colspan: 1,
			  }
		  }
		  if(rowIndex>=this.temp[0].start&&rowIndex<this.temp[0].end){
			  if(rowIndex==this.temp[0].end-1){
				  this.temp[0]=null;
			  }
			  return{
				  rowspan: 0,
				  colspan: 0,
			  }
		  }else{
			  this.temp[0]=null;
			  return {
			    rowspan: 1,
			    colspan: 1,
			  }
		  }

        }
      }
      if (columnIndex === 3) {

        if (row.tue.lessonName !== undefined) {
			this.temp[1]=row.tue;
          return {
            rowspan: row.tue.end - row.tue.start + 1,
            colspan: 1
          }
        } else {
			
			
		  if(this.temp[1]==null){
			  return {
			    rowspan: 1,
			    colspan: 1,
			  }
		  }
		  if(rowIndex>=this.temp[1].start&&rowIndex<this.temp[1].end){
			  if(rowIndex==this.temp[1].end-1){
				  this.temp[1]=null;
			  }
			  return{
				  rowspan: 0,
				  colspan: 0,
			  }
		  }else{
			  this.temp[1]=null;
			  return {
			    rowspan: 1,
			    colspan: 1,
			  }
		  }

        }
      }
      if (columnIndex === 4) {
        if (row.wed.lessonName !== undefined) {
        	this.temp[2]=row.wed;
          return {
            rowspan: row.wed.end - row.wed.start + 1,
            colspan: 1
          }
        } else {
          if(this.temp[2]==null){
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
          if(rowIndex>=this.temp[2].start&&rowIndex<this.temp[2].end){
        	  if(rowIndex==this.temp[2].end-1){
        		  this.temp[2]=null;
        	  }
        	  return{
        		  rowspan: 0,
        		  colspan: 0,
        	  }
          }else{
        	  this.temp[2]=null;
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
        
        }
      }
      if (columnIndex === 5) {
        if (row.thu.lessonName !== undefined) {
        	this.temp[3]=row.thu;
          return {
            rowspan: row.thu.end - row.thu.start + 1,
            colspan: 1
          }
        } else {
          if(this.temp[3]==null){
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
          if(rowIndex>=this.temp[3].start&&rowIndex<this.temp[3].end){
        	  if(rowIndex==this.temp[3].end-1){
        		  this.temp[3]=null;
        	  }
        	  return{
        		  rowspan: 0,
        		  colspan: 0,
        	  }
          }else{
        	  this.temp[3]=null;
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
        
        }
      }
      if (columnIndex === 6) {
        if (row.fri.lessonName !== undefined) {
        	this.temp[4]=row.fri;
          return {
            rowspan: row.fri.end - row.fri.start + 1,
            colspan: 1
          }
        } else {
          if(this.temp[4]==null){
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
          if(rowIndex>=this.temp[4].start&&rowIndex<this.temp[4].end){
        	  if(rowIndex==this.temp[4].end-1){
        		  this.temp[4]=null;
        	  }
        	  return{
        		  rowspan: 0,
        		  colspan: 0,
        	  }
          }else{
        	  this.temp[4]=null;
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
        
        }
      }
      if (columnIndex === 7) {
        if (row.sat.lessonName !== undefined) {
        	this.temp[5]=row.sat;
          return {
            rowspan: row.sat.end - row.sat.start + 1,
            colspan: 1
          }
        } else {
          if(this.temp[5]==null){
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
          if(rowIndex>=this.temp[5].start&&rowIndex<this.temp[5].end){
        	  if(rowIndex==this.temp[5].end-1){
        		  this.temp[5]=null;
        	  }
        	  return{
        		  rowspan: 0,
        		  colspan: 0,
        	  }
          }else{
        	  this.temp[5]=null;
        	  return {
        	    rowspan: 1,
        	    colspan: 1,
        	  }
          }
        
        }
      }
      if (columnIndex === 8) {
        if (row.sun.lessonName !== undefined) {
			this.temp[6]=row.sun;
          return {
            rowspan: row.sun.end - row.sun.start + 1,
            colspan: 1
          }
        } else {
		  if(this.temp[6]==null){
			  return {
			    rowspan: 1,
			    colspan: 1,
			  }
		  }
		  if(rowIndex>=this.temp[6].start&&rowIndex<this.temp[6].end){

			  if(rowIndex==this.temp[6].end-1){
				  this.temp[6]=null;
			  }
			  return{
				  rowspan: 0,
				  colspan: 0,
			  }
		  }else{
			  this.temp[6]=null;
			  return {
			    rowspan: 1,
			    colspan: 1,
			  }
		  }

        }
      }
    }
  }
}
</script>


<style scoped>
	.box-card{
		display: flex;
		height: 90%;
		width: 98%;
		position: absolute;
		right: 1%;
		bottom: 6%;
		flex-direction: column;
		align-items:flex-end;
	}
	.box-card /deep/ .el-card__body{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin: 0px;
		border: 0px;
		padding: 0px;
	}
	.el-select {
		width: 50px;
		}
</style>

效果：
在这里插入图片描述
在这里插入图片描述

&Demain
关注
  • 11
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Vue + element 实现课程表
qq_26705343的博客
06-17 3438
<template> <div class='class-table'> <div class='table-wrapper'> <div class='tabel-container'> <table> <thead> <tr>
vue — 课程表
sueRimn的博客
04-08 4403
功能需求是：在有对接数据的情况下显示该课程表，默认显示当前周的七天数据，并且当天的列要呈淡黄色背景。可以选择日期，必须七天，多了少了都会提示，这个是根据vant的日期选择组件进行小改动实现的，具体实现效果如下。 这是默认当前周的显示： 这是选择少于七天的提示信息，并且确定按钮不可点击： 跟后端沟通，设计的返回数据结构如下： timeTable: { // 返回7天对应的周几数组 weekday: ["周四", "周五"..
[若依ruoyi-vue框架使用日历显示课程表]用Elementui Calendar日历显示课程数据- Calendar日历自定义内容
SiTiATech的博客
01-25 5729
[若依ruoyi-vue框架使用日历显示课程表]用Elementui Calendar日历显示课程数据- Calendar日历自定义内容，使用elementui显示课程表信息
studentCoursesSystem:学生课程信息管理系统，本系统基于vue + element-UI构建，配合面试题库中大规模服务开发，具有学生信息管理，课程信息管理，选课表管理，学生选课等多种功能。将功能区域划分为组件，数据处理Swift，并提供严谨的校验及友好的交互操作
03-11
【学生课程信息管理系统使用文档】 本系统基于vue + element-UI构建，配合面试题库中如何进行服务开发，具有学生信息管理，课程信息管理，选课表管理，学生选课等多种功能。将功能区域划分为组件，数据处理Swift，面试翻译中要求的所有功能皆已实现，并提供严谨的校正及友好的交互操作。 界面概述如下 一，系统部署 检查本机是否有npm，node环境 将后台服务器开启，检查是否能够正常访问【重要！】 将项目文件夹导入编译器【本人使用vscode开发，建议一致】 ：终端在此项目文件夹的环境下执行指令npm i【必须！】 待所有依赖包安装完成后继续执行指令npm run dev 待终端中提示在浏览器输入此地址访问 查看页面执行想要的操作 二，角色功能分类 在本项目中，以徽章识别区分用户角色 管理员管理员提供给管理员尽可能的服务补充，能够使学生表，课程表及相关学生的选课情况，进行数据的CURD操
vue 课程表（可按时间，移动位置）
最新发布
weixin_45461004的博客
06-04 337
基本功能已经实现，后面可根据项目具体要求修改。
springboot+vue.js+ElementUI高校教务选课统计课程评价管理系统 vv4e9
qq840612233的博客
12-23 567
本论文主要完成不同用户的权限划分，不同用户具有不同权限的操作功能，在学生模块，主要有学生进行注册和登录，学生可以查看课程信息、选课信息、课程成绩、课程评价、退课申请等，还能修改个人信息等；在教师模块，教师添加课程信息或者审核信息等，在管理员模块，管理员可以对学生信息、教师信息、课程信息、选课信息等进行相应的操作。管理员功能模块包括：学生、教师、课程信息、选课信息、课程成绩、退课申请等功能，学生功能模块包括：课程信息、选课信息、课程成绩等，教师功能模块包括：课程信息、选课信息、课程成绩等。
element-ui:课程练习之编写Element-ui
03-24
元素用户界面 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 运行单元测试 yarn run test:unit 自定义配置 请参阅。
vue实现动态课程表(TimeTable)
m0_57489910的博客
11-08 9447
动态课程表、安排表
vue3+ts+elementui制作精美的课表
雨花石
07-03 1618
使用vue3+ts+elementui 如何制作出精美的课表呢，
课程表组件-课程表组件.zip
08-30
前端工具类，课程表组件，下载后可直接运行，需要的可以直接下载哦
基于SSM和Vue+ElementUI的学生选课系统
05-21
【作品名称】：基于SSM和Vue+ElementUI的学生选课系统 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： 管理员页面...
基于SSM和Vue+ElementUI的学生选课系统.zip
05-31
ElementUI则是基于Vue.js的一套企业级UI组件库，提供了丰富的组件，如表格、按钮、下拉框等，使得前端页面的布局和交互设计更为便捷。 三、数据库设计与管理 本系统包含了数据库文件，意味着在设计过程中需要考虑...
毕设&课程作业_基于Vue+elementUI+echarts实现的coffee智能推荐系统.zip
02-05
【标题】中的“毕设&课程作业_基于Vue+elementUI+echarts实现的coffee智能推荐系统”揭示了这是一个用于毕业设计或课程作业的项目，它利用了前端技术栈Vue.js、elementUI以及数据可视化库echarts来构建一个咖啡智能...
基于vue+elementUI+springboot 的模仿'猪八戒'的服务外包平台.zip
05-18
【标题】"基于vue+elementUI+springboot 的模仿'猪八戒'的服务外包平台"是一个综合性的项目，它融合了前端与后端的技术，旨在创建一个类似“猪八戒网”的在线服务交易平台。这个平台可能包括用户注册、登录、发布...
基于Vue+ElementUI+Springboot前后端分离网约车预约系统设计毕业源码案例设计.zip
01-02
本项目是一个基于Vue.js、ElementUI前端框架以及Spring Boot后端框架实现的网约车预约系统，适合用作毕业设计或课程设计的学习案例。该系统实现了完整的前后端分离，为用户提供了一个功能完善的在线预约打车平台。 ...
vue2实现卡片拖拽式课程表
qq_44930306的博客
06-27 1661
这章分享一下拖拽卡片案例。
Vue + Element UI——大学课程表（包括普通课和实践课）解决方案
热门推荐
无限迭代中......
03-29 1万+
解决方案 <template> <div class="course-table" > <el-scrollbar style="height: 100%" > <div class="course-table-content" > <div class="to...
基于vue和elementui的后台
03-16
管理系统是一种基于Vue框架和Element UI组件库开发的后台管理系统。它可以帮助开发者快速搭建一个功能完善、界面美观的后台管理系统，提高开发效率和用户体验。该系统具有丰富的组件和插件，支持响应式布局和多语言切换等功能，可以满足不同项目的需求。同时，Vue和Element UI都是开源的，拥有庞大的社区和生态系统，可以为开发者提供更多的资源和支持。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值