vue 时间安排表

仿照这种时间安排表的形式，使用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>