使用vue实现超级课程表的功能【附完整源码】

效果图展示：


实现思路：
（1）使用table表格实现的
（2）接口数据需要返回一个二位数组即可。

代码实现：
封装一个超级课程表组件ClassTable如下：

<template>
  <!-- 课表组件 -->
  <div class="class-table">
    <div class="table-wrapper">
      <div class="tabel-container">
        <table>
          <thead>
            <tr>
              <th v-for="(item,index) in classTableData.weeks" :key="index">{
   {
   item?'周'+item:''}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in classTableData.courses" :key="index">
              <td
                style="font-size:12px;background:#d4f7fd;word-wrap: break-word; 
  word-break: break-all;"
              >{
   {
   changeCharacter(index)}}</td>
              <td v-for="(innerItem,idx) in item" :key="idx" @click="toScanDetail(innerItem,idx)">
                <div style v-if="innerItem.lessonsName">
                  {
   {
   innerItem.lessonsName}}
                  <br />
                  {
   {
   innerItem.lessonsTime}}
                </div>
              </td>