原文链接: vue 时间安排表
上一篇: Ubuntu 安装 mysql
下一篇: TensorFlow flask 设计 一个数字识别 SPA
仿照这种时间安排表的形式,使用vue完成这种类似课表的显示效果
首先将每周的预约信息放入一个长度为7的数组中,0-6表示星期天到星期六
创建一个33*7的数组
每个格子1表示该时间空闲,null表示该时间已被占用,如果是对象的话表示这是一个事件的起始事件,按照对象中的信息,设置单元格大小,显示活动主题
效果
数据格式
let days = "天一二三四五六"
let times = ['7:00', '7:30', '8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00']
let meeting = [
// 安排的数组,开始时间和持续时间,标题
[{
subject: '秘书处',
start: 29,
time: 4,
pass:true,
}],
[
{
subject: "团校",
start: 28,
time: 4
}
],
[
{
subject: "数学",
start: 24,
time: 4,
},
{
subject: "组织部",
start: 28,
time: 4,
}
],
[
{
subject: '信息中心',
start: 19,
time: 4,
pass:true,
},
{
subject: '实践部',
start: 28,
time: 4,
pass:false,
}
],
[
{
subject: '文艺部',
start: 28,
time: 4,
}
],
[
{
subject: '能动',
start: 24,
time: 4,
},
{
subject: '志工部',
start: 28,
time: 4,
},
],
[
{
subject: '辩论队',
start: 24,
time: 9,
pass:true,
},
]
]
export {
days,
times,
meeting,
}
组件代码
<template>
<div>
<table class="table table-bordered table-striped table-sm" style="height: 100px">
<thead>
<tr>
<th>时间</th>
<th v-for="i in 7">
{{days[i-1]}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="i,index in info">
<th scope="row">{{index}},{{times[index]}}</th>
<td class="mytd" v-for="j in i" v-if="j" :rowspan="j==1? 1:j['time']" :class=" {cell:j&&j!=1&&j.pass,cell2:j&&j!=1&&!j.pass}">
{{j?j.subject:''}}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import {days, times, meeting} from '../config'
import 'bootstrap/dist/css/bootstrap.css'
// 根据日期显示预定情况
export default {
name: "week",
mounted() {
// 根据预约信息数组,处理成表格可以使用的形式
// 预约信息是该周每天的预约情况,0-6表示星期一到星期天
let info = []
for (let i of meeting) {
for (let j of i)
console.log(j)
}
for (let i = 0; i < 33; i++) {
info[i] = []
for (let j = 0; j < 7; j++) {
// 1 表示空白
info[i].push(1)
}
}
for (let i = 0; i < 7; i++) {
// m 表示第i天所有活动的集合
// cnt 表示第i天活动数目
let m = meeting[i]
for (let k of m) {
info[k.start][i] = k
for (let p = 1; p < k.time; p++)
info[k.start + p][i] = null
}
}
console.log(info)
this.info = info
}
,
computed: {}
,
data() {
return {
info: [],
days: days,
times: times,
}
}
}
</script>
<style scoped>
.cell {
/*width: 100%;*/
/*height: 100%;*/
/*display: flex;*/
/*flex-direction: column;*/
/*align-items: center;*/
/*justify-content: center;*/
align-items: center;
vertical-align: middle;
background: lightskyblue;
box-sizing: border-box;
}
.cell2{
background: greenyellow;
box-sizing: border-box;
}
tbody * {
padding: 0;
}
.mytd:hover{
/*background: red;*/
border: 2px solid blue;
}
</style>