vue怎么实现课表

Vue 实现课表的方法

使用表格布局

通过 Vue 的模板语法结合 HTML 表格实现课表布局。可以使用 v-for 动态渲染课程数据。

<template>
  <table>
    <thead>
      <tr>
        <th>时间</th>
        <th v-for="day in days" :key="day">{{ day }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="time in times" :key="time">
        <td>{{ time }}</td>
        <td v-for="day in days" :key="day">
          {{ getCourse(day, time) }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      days: ['周一', '周二', '周三', '周四', '周五'],
      times: ['8:00', '10:00', '14:00', '16:00'],
      courses: {
        '周一': {
          '8:00': '数学',
          '10:00': '英语'
        }
      }
    }
  },
  methods: {
    getCourse(day, time) {
      return this.courses[day]?.[time] || '-'
    }
  }
}
</script>

使用 CSS Grid 布局

通过 CSS Grid 实现更灵活的课表布局，适合响应式设计。

<template>
  <div class="timetable">
    <div class="header" v-for="day in days" :key="day">{{ day }}</div>
    <div class="time" v-for="time in times" :key="time">{{ time }}</div>
    <div 
      v-for="slot in slots" 
      :key="`${slot.day}-${slot.time}`"
      class="course"
    >
      {{ getCourse(slot.day, slot.time) }}
    </div>
  </div>
</template>

<style>
.timetable {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;
}
.header { grid-row: 1; }
.time { grid-column: 1; }
.course {
  background: #f0f0f0;
  padding: 10px;
}
</style>

使用第三方组件库

借助 Element UI 或 Vuetify 等 UI 库快速实现美观的课表。

<template>
  <el-table :data="tableData">
    <el-table-column prop="time" label="时间" width="180" />
    <el-table-column 
      v-for="day in days" 
      :key="day" 
      :label="day"
    >
      <template #default="{ row }">
        {{ getCourse(day, row.time) }}
      </template>
    </el-table-column>
  </el-table>
</template>

添加交互功能

实现课程编辑、拖拽调整等高级功能。

methods: {
  editCourse(day, time) {
    this.editing = { day, time }
  },
  saveCourse() {
    this.$set(this.courses[this.editing.day], this.editing.time, this.newCourse)
    this.editing = null
  }
}

响应式设计考虑

使用媒体查询确保课表在不同设备上正常显示。

@media (max-width: 600px) {
  .timetable {
    grid-template-columns: 1fr;
  }
}

以上方法可以根据具体需求选择或组合使用，实现从简单到复杂的各种课表功能。数据存储可以使用 Vuex 或 Pinia 管理状态，后端对接则通过 axios 进行 API 调用。