当前位置：首页 > VUE

课程表vue实现

2026-01-12 01:44:50VUE

Vue 课程表实现方案

使用 Vue 实现课程表可以通过组件化、动态数据绑定和响应式布局完成。以下是核心实现步骤：

数据准备 定义课程数据格式，通常包含课程名称、时间、教室、教师等信息：

data() {
  return {
    courses: [
      { id: 1, name: '数学', day: 1, start: 1, end: 2, room: 'A101', teacher: '张老师' },
      { id: 2, name: '英语', day: 2, start: 3, end: 4, room: 'B203', teacher: '李老师' }
    ],
    weekDays: ['周一', '周二', '周三', '周四', '周五'],
    timeSlots: ['8:00', '9:00', '10:00', '11:00', '13:00', '14:00']
  }
}

模板结构 使用表格布局展示课程表，通过 v-for 循环渲染星期和时间段：

<div class="timetable">
  <table>
    <thead>
      <tr>
        <th>时间</th>
        <th v-for="day in weekDays" :key="day">{{ day }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(time, index) in timeSlots" :key="index">
        <td>{{ time }}</td>
        <td v-for="day in weekDays.length" :key="day" 
            @click="handleCellClick(day, index+1)">
          <div v-for="course in getCourse(day, index+1)" 
               :key="course.id" class="course-item">
            {{ course.name }}<br>{{ course.room }}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

样式设计 使用 CSS 美化课程表，设置单元格样式和课程块样式：

.timetable table {
  border-collapse: collapse;
  width: 100%;
}
.timetable th, .timetable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.timetable th {
  background-color: #f2f2f2;
}
.course-item {
  background-color: #4CAF50;
  color: white;
  margin: 2px;
  padding: 4px;
  border-radius: 4px;
}

交互功能 添加点击事件处理课程选择或编辑：

methods: {
  getCourse(day, timeSlot) {
    return this.courses.filter(course => 
      course.day === day && 
      course.start <= timeSlot && 
      course.end >= timeSlot
    )
  },
  handleCellClick(day, timeSlot) {
    console.log(`选择了${this.weekDays[day-1]}第${timeSlot}节课`)
  }
}

高级功能扩展

拖拽调整课程 使用 vue-draggable 等库实现课程拖拽：

import draggable from 'vuedraggable'

components: { draggable },
methods: {
  onDragEnd(evt) {
    // 更新课程位置数据
  }
}

课程颜色分类 根据课程类型设置不同颜色：

computed: {
  courseStyle() {
    return (type) => ({
      'background-color': this.getColorByType(type)
    })
  }
}

响应式适配 使用媒体查询使课程表适应不同屏幕：

@media (max-width: 768px) {
  .timetable {
    font-size: 12px;
  }
}

完整组件示例

<template>
  <div class="timetable-container">
    <div class="controls">
      <button @click="addCourse">添加课程</button>
    </div>
    <table class="timetable">
      <!-- 表格结构同上 -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据定义同上
    }
  },
  methods: {
    // 方法定义同上
    addCourse() {
      // 添加新课程逻辑
    }
  }
}
</script>

通过以上方案可以构建一个功能完整的 Vue 课程表组件，可根据实际需求进一步扩展如课程详情弹窗、数据持久化等功能。

课程表vue实现