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 调用。
