用vue2写一个课程表
时间: 2023-07-18 09:08:10 浏览: 138
好的,以下是一个简单的基于 Vue2 的课程表示例:
1. 首先,在你的 Vue 项目中安装 `vue-tables-2` 和 `moment` 库:
```bash
npm install vue-tables-2 moment --save
```
2. 创建一个 `CourseTable.vue` 组件:
```vue
<template>
<div class="course-table">
<h2>{{ title }}</h2>
<vue-tables-2 :data="tableData" :columns="columns" :options="options"></vue-tables-2>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'CourseTable',
props: {
title: {
type: String,
default: 'Course Table'
},
courses: {
type: Array,
required: true
}
},
data() {
return {
columns: ['time', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
options: {
headings: {
time: 'Time'
},
filterable: false,
sortable: false,
perPage: 24,
perPageValues: [12, 24],
pagination: {
dropdown: true,
chunk: 5
}
},
tableData: []
}
},
mounted() {
this.tableData = this.generateTableData()
},
methods: {
generateTableData() {
const tableData = []
for (let i = 0; i < 24; i++) {
const row = {
time: `${i}:00 - ${i + 1}:00`
}
const courses = this.courses.filter(course => {
const startTime = moment(course.startTime, 'HH:mm')
const endTime = moment(course.endTime, 'HH:mm')
return startTime.hours() <= i && endTime.hours() > i
})
courses.forEach(course => {
row[course.weekday.toLowerCase()] = course.name
})
tableData.push(row)
}
return tableData
}
}
}
</script>
<style>
.course-table {
margin: 20px;
}
</style>
```
3. 在你的父组件中使用 `CourseTable` 组件:
```vue
<template>
<div>
<course-table :courses="courses"></course-table>
</div>
</template>
<script>
import CourseTable from './CourseTable.vue'
export default {
name: 'App',
components: {
CourseTable
},
data() {
return {
courses: [
{ name: 'Math', startTime: '08:00', endTime: '09:30', weekday: 'Mon' },
{ name: 'English', startTime: '10:00', endTime: '11:30', weekday: 'Tue' },
{ name: 'History', startTime: '13:00', endTime: '14:30', weekday: 'Wed' },
{ name: 'Chemistry', startTime: '15:00', endTime: '16:30', weekday: 'Thu' },
{ name: 'Physics', startTime: '16:00', endTime: '17:30', weekday: 'Fri' }
]
}
}
}
</script>
```
这个示例中,我们使用 `vue-tables-2` 来渲染数据表格,并且使用 `moment` 来处理时间。`CourseTable` 组件接受一个 `courses` 属性,它是一个包含课程信息的数组。在 `mounted` 钩子中,我们生成了一个二维数组 `tableData`,它包含了每个小时的表格行。对于每个课程,我们将其名称放到对应的时间和星期几的单元格中。最后,我们在模板中使用 `vue-tables-2` 组件来渲染这个二维数组。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)