使用vue3绘成一个简单的课程表

<template>
  <div class="course-table">
    <div class="table-header">
      <div class="header-item">时间/日期</div>
      <div v-for="day in days" :key="day" class="header-item">{{ day }}</div>
    </div>
    <div v-for="time in times" :key="time" class="table-row">
      <div class="row-item">{{ time }}</div>
      <div v-for="day in days" :key="day" class="row-item">
        <!-- 这里可以根据实际需求插入课程信息 -->
        {{ getCourse(day, time) }}
      </div>
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const days = ref(['星期一', '星期二', '星期三', '星期四', '星期五']);
    const times = ref(['08:00', '09:30', '11:00', '12:30', '14:00', '15:30', '17:00', '18:30']);
    const courses = ref({
      '星期一': { '08:00': '数据结构' },
      '星期二': { '09:30': '算法分析' },
      // 添加更多课程信息
    });
 
    const getCourse = (day, time) => {
      return courses.value[day] ? courses.value[day][time] : '';
    };
 
    return { days, times, getCourse };
  },
};
</script>
 
<style scoped>
.course-table {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 对应times中的时间段数量 */
  gap: 1px; /* 表格行间距 */
}
.table-header, .table-row {
  display: contents;
}
.header-item, .row-item {
  border: 1px solid #ccc; /* 单元格边框 */
  text-align: center;
  padding: 5px; /* 单元格内边距 */
}
.header-item:first-child, .row-item:first-child {
  font-weight: bold; /* 第一列加粗 */
}
</style>

这段代码定义了一个简单的课程表组件，其中包含了时间和日期的表头，并可以根据传入的课程信息进行展示。样式部分使用了CSS Grid布局来构建表格框架，并给每个单元格添加了边框和内边距。这个例子可以作为Vue 3开发者学习如何创建基本表格的参考。