使用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>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
 
<script>
var that;
import { Dialog } from "vant";
export default {
  props: {
    classTableData: {
      type: Object
    }
  },
  computed: {
    // 将数字转换成汉字
    changeCharacter(num) {
      return function(num) {
        var digArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var characterArr = [
          "一",
          "二",
          "三",
          "四",
          "五",
          "六",
          "七",
          "八",
          "九"
        ];
        return characterArr[num];
      };
    }
  },
  methods: {
    // 查看该课程的相关详情
    toScanDetail(item, idx) {
      var con = `<div style="width:180px;text-align:left!important;margin:0 auto;color:#999;font-size:16px">课程名称：${item.lessonsName}<br/>上课时间：${item.lessonsTime}<br/>上课地点：${item.lessonsAddress}<br/>授课老师：${item.lessonsTeacher}<br/>课程课时：${item.lessonsRemark}</div>`;
      if (item.lessonsName) {
        Dialog.alert({
          message: con
        });
      }
    }
  }
};
</script>
 
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.table-wrapper {
  width: 100%;
  overflow: auto;
  margin-bottom: 60px;
}
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  color: #677998;
}

thead {
  background: #d4f7fd;
}
th {
  font-weight: normal;
  height: 46px !important;
}
tbody {
  font-size: 12px;
}
th,
td {
  text-align: center;
  height: 80px;
  border-right: 1px solid #fefefe;
  border-bottom: 1px solid #fefefe;
}
tr td div {
  background: #a5d16d;
  width: 100%;
  height: 100%;
  color: #efefef;
  border-radius: 10px;
  padding: 5px;
  box-sizing: border-box;
}

tr td:first-child {
  color: #333;
}
.course {
  background-color: #ebbbbb;
  color: #fff;
  display: inline-block;
  border-radius: 3px;
  width: 47%;
  margin: 1px 1%;
}
.bgColor {
  background-color: #89b2e5;
}
</style>

使用该组件如下：

<template>
  <div>
    <v-ClassTable :classTableData="classTableData" />
  </div>
</template>
<script>
var that;
import ClassTable from "../../components/ClassTable";
import { reqFindTeacherLesson } from "../../config/api";
export default {
  data() {
    return {
      msg: "",
      classTableData:{
          weeks: ["", "一", "二", "三", "四", "五","六","日"],
          courses: [],
      }
    };
  },
  components: {
    "v-ClassTable": ClassTable
  },
  created() {
    const { userId, userName, roleId } = JSON.parse(
      this.$cookie.get("userInfo")
    );
    this.findTeacherLesson(userName);
  },
  methods: {
    // 查询教师课表
    async findTeacherLesson(userName) {
      that = this;
      var params = {
        userName: userName
      };
      const { msg, status, info } = await reqFindTeacherLesson(params);
      that.classTableData.courses = info;
    }
  }
};
</script>

接口返回的数据格式如下：

{
    "msg": "查询成功",
    "status": 1,
    "info": [
        [
            {
                "id": 1,
                "classId": 2,
                "lessonsTime": "8:00-9:40",
                "lessonsName": "计算机导论",
                "lessonsAddress": "二教302",
                "lessonsTeacher": "吴老师",
                "lessonsRemark": "1-17周",
                "lessonsNumber": "一",
                "weekday": "星期一"
            },
            {
                "id": 19,
                "classId": 2,
                "lessonsTime": "8:00-9:40",
                "lessonsName": "编译原理",
                "lessonsAddress": "二教302",
                "lessonsTeacher": "吴老师",
                "lessonsRemark": "1-5,8-12周",
                "lessonsNumber": "一",
                "weekday": "星期四"
            },
        ],
        [{},{},{}],
        [{},{},{}]
    ]
}