vue如何制作排班表或者课程表?

今天给大家分享排班表,或者课程表,都是一个道理,算时间,点击上一周或者下一周,每个日期都跟着变,我写这个的时候快愁死了,网上也没有具体的例子,不过最后总算做出来了,我觉得还是比较好理解的,大家有好的方法也可以分享给我,正好把代码优化一下,嘻嘻。

我要做的效果是这样的:ps:如果后台给我返一个时间,就简单多了,但是他不返,只好自己做了,红色框圈出来的是我自己算出来的时间,绿色框圈住的是请求后台的数据,点击上一周或者下一周,所有的日期星期几都会改变。


效果图

先说布局,上面是几个div,下面是table

我给大家截图一部分,其他都是一个道理,就是变量名不同

这个getTime方法里面,str表示获取星期几,然后给它判断星期几调用getBeforNday方法

只要获取到星期日这一天。其他时间都是根据它推算

根据星期日那一天获取其他的日期,给一些变量赋值


点击上一周,或者下一周,调用this.BeforeNday方法,把之前赋值的基础值付给它。

然后就能实现联动了,点击上一周和下一周其他日期也会跟着变,主要是找到一个基准值,所有的数据都根据它来。基本的代码都在截图了,有什么问题可以向我提问。

你可能感兴趣的:(vue如何制作排班表或者课程表?)