当前位置：首页 > VUE

课程表vue实现

2026-01-07 02:33:15VUE

实现课程表的Vue组件

创建课程表需要设计数据结构、布局和交互逻辑。以下是一个基于Vue 3的实现方案：

数据结构设计

const timetableData = ref([
  {
    time: '08:00-09:00',
    Monday: '数学',
    Tuesday: '英语',
    Wednesday: '物理',
    Thursday: '化学',
    Friday: '生物'
  },
  // 其他时间段...
])

模板结构

<template>
  <div class="timetable">
    <table>
      <thead>
        <tr>
          <th>时间</th>
          <th v-for="day in days" :key="day">{{ day }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="slot in timetableData" :key="slot.time">
          <td>{{ slot.time }}</td>
          <td v-for="day in days" :key="day">{{ slot[day] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

样式设计

.timetable {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

动态课程表实现

对于需要动态编辑的课程表，可以增加编辑功能：

状态管理

const editable = ref(false)
const editedItem = ref(null)
const editedDay = ref('')

编辑方法

const startEdit = (slot, day) => {
  editedItem.value = slot
  editedDay.value = day
  editable.value = true
}

const saveEdit = () => {
  editable.value = false
  editedItem.value = null
  editedDay.value = ''
}

编辑界面

<template>
  <td @click="startEdit(slot, day)">
    <span v-if="!editable || editedItem !== slot || editedDay !== day">
      {{ slot[day] || '点击编辑' }}
    </span>
    <input
      v-else
      v-model="slot[day]"
      @blur="saveEdit"
      @keyup.enter="saveEdit"
      autofocus
    />
  </td>
</template>

响应式课程表

使用计算属性处理动态数据：

周数切换

const currentWeek = ref(1)
const weeks = ref([1, 2, 3, 4])

const filteredData = computed(() => {
  return timetableData.value.filter(item => item.week === currentWeek.value)
})

科目颜色标记

const subjectColors = {
  '数学': '#FFCCCC',
  '英语': '#CCFFCC',
  '物理': '#CCCCFF',
  // 其他科目...
}

const getSubjectColor = (subject) => {
  return subjectColors[subject] || '#FFFFFF'
}

应用颜色

课程表vue实现

<td :style="{ backgroundColor: getSubjectColor(slot[day]) }">
  {{ slot[day] }}
</td>

完整组件示例

<script setup>
import { ref, computed } from 'vue'

const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
const timetableData = ref([
  // 初始化数据
])

// 其他逻辑...
</script>

<template>
  <div class="timetable-container">
    <!-- 周数选择器 -->
    <div class="week-selector">
      <button 
        v-for="week in weeks" 
        :key="week"
        @click="currentWeek = week"
        :class="{ active: currentWeek === week }"
      >
        第{{ week }}周
      </button>
    </div>

    <!-- 课程表主体 -->
    <div class="timetable">
      <table>
        <!-- 表头和内容 -->
      </table>
    </div>
  </div>
</template>

<style scoped>
/* 样式规则 */
</style>

这个实现方案提供了基本的课程表展示功能，支持动态编辑、周数切换和科目颜色标记。可以根据实际需求进一步扩展功能，如添加课程详情弹窗、导入导出功能等。