基于vue和elementui的课程表

        之前用的课程表基本都是基于calendar开发的，calendar功能比较丰富，能实现很多功能，但是基于学校项目来说并不完美，首先就是最左侧的时间轴，学校课程表一般都是节次，而calendar都是时间。因为学校夏季和冬季上课时间都不同，所以并不实用。而有的calendar组件封装的比较厉害，想改造是很麻烦的，正是基于此我自己写了一个基础版本的课程表，分享给有需要的朋友。

        

        上面是课程表的截图，样式是采用正方教务的课程表样式，大部分学校用的都是正方的教务系统，这种样式老师和学生都能接受。如果不想用这种样式，也可以自己修改，代码比较简单。 

        课程表最左侧是时间段：上午、下午和晚上。第二列是节次，节次上午固定为4节课，下午的节次是可扩展的，只需要传入一个值即可，因为在做项目的过程中遇到过学校下午是5节课的，4节课的都有，所以做了一个可变动的。晚上的节次是根据总节次和上午，下午的节次算出来的，所有在调用组件的时候，需要传入总节次和下午的节次。

        课程表内容展示了一周7天，可以根据实际情况进行调整 。内容比较简单，标题和内容，标题是课程名称，内容可以自由拼接，在渲染的时候用的v-html，因此在拼接内容时，可以自由拼接一些html元素，让内容更好看。并且课程表数据中还有一个class属性，可以传入不同的class自定义一些样式。（这个版本只是有，但并未使用）

        整个课程表的内容大概就是这些，比较简单，但是挺实用，而且可以自己根据项目需要进行修改，比如添加点击事件，修改样式等等。

 

 直接上代码：

调用的时候的代码：