vue怎么实现课表

Vue 实现课表的方法

数据结构设计

课表通常需要存储课程名称、时间、地点等信息。可以使用数组或对象来存储这些数据。

data() {
  return {
    courses: [
      { id: 1, name: '数学', time: '周一 8:00-10:00', location: 'A101' },
      { id: 2, name: '英语', time: '周二 10:00-12:00', location: 'B202' }
    ]
  }
}

使用表格渲染课表

Vue 的模板语法可以方便地渲染表格形式的课表。

<table>
  <thead>
    <tr>
      <th>课程名称</th>
      <th>上课时间</th>
      <th>上课地点</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="course in courses" :key="course.id">
      <td>{{ course.name }}</td>
      <td>{{ course.time }}</td>
      <td>{{ course.location }}</td>
    </tr>
  </tbody>
</table>

添加样式美化课表

通过 CSS 可以美化课表的外观，使其更加直观。

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}

实现动态功能

可以添加功能让用户添加、删除或编辑课程。

methods: {
  addCourse() {
    this.courses.push({
      id: this.courses.length + 1,
      name: '新课程',
      time: '未设置',
      location: '未设置'
    });
  },
  deleteCourse(id) {
    this.courses = this.courses.filter(course => course.id !== id);
  }
}

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如 FullCalendar 或 Vuetify 的日历组件。

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridWeek',
        events: [
          { title: '数学', start: '2023-10-02T08:00:00', end: '2023-10-02T10:00:00' }
        ]
      }
    }
  }
}

响应式设计

确保课表在不同设备上都能正常显示，可以通过媒体查询调整布局。

@media (max-width: 600px) {
  table {
    font-size: 14px;
  }
  th, td {
    padding: 4px;
  }
}

以上方法可以根据具体需求进行调整和扩展，实现一个功能完善且美观的课表。