参考地址 vue实现table课程表
方案一
采用二维数组，固定显示每周7天及固定课节数，无数据的天及课节也会固定占位
<template>
<div>
<div>
<div>
<table>
<thead>
<tr>
<th>时间</th>
<th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex"> {{'周' + digital2Chinese(weekIndex, 'week')}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
<td>
<p>{{'第' + digital2Chinese(lessonIndex+1) + "节"}}</p>
<p>{{ lesson }}</p>
</td>
<td v-for="(course, courseIndex) in classTableData.courses" :key="courseIndex">
{{classTableData.courses[courseIndex][lessonIndex] || '-'}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
classTableData: {
lessons: [
'08:00-09:00',
'09:00-10:00',
'10:00-11:00',
'11:00-12:00',
'13:00-14:00',
'14:00-15:00',
'15:00-16:00',
'16:00-17:00'
],
courses: [
['', '', '', '', '', '', '', ''],
['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
['语文', '数学', '英语', '历史', '', '化学', '物理', '生物'],
['生物', '', '化学', '政治', '历史', '英语', '数学', '语文'],
['语文', '数学', '英语', '历史', '政治', '', '物理', '生物'],
['生物', '物理', '化学', '', '历史', '英语', '数学', '语文'],
['语文', '数学', '英语', '', '', '', '', ''],
]
}
};
},
created() {
// /* mock随机数据*/
// Mock.mock({
// lessons: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
// 'courses|7': [['生物', '物理', '化学', '政治', '历史', '英语', '', '语文']]
// });
},
methods: {
/**
* 数字转中文
* @param {Number} num 需要转换的数字
* @param {String} identifier 标识符
* @returns {String} 转换后的中文
*/
digital2Chinese(num, identifier) {
const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
}
}
};
</script>
<style scoped>
.class-table {
.table-wrapper {
width: 100%;
height: 100%;
overflow: auto;
}
.tabel-container {
margin: 7px;
table {
table-layout: fixed;
width: 100%;
thead {
background-color: #67a1ff;
th {
color: #fff;
line-height: 17px;
font-weight: normal;
}
}
tbody {
background-color: #eaf2ff;
td {
color: #677998;
line-height: 12px;
}
}
th,
td {
width: 60px;
padding: 12px 2px;
font-size: 12px;
text-align: center;
}
tr td:first-child {
color: #333;
.period {
font-size: 8px;
}
}
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
方案二
固定显示每周7天及固定课节数，无数据的天及课节也会固定占位
<template>
<div>
<div>
<div>
<table>
<thead>
<tr>
<th>时间</th>
<th v-for='(week, index) in weeks' :key='index'> {{'周' + digital2Chinese(index+1, 'week')}}</th>
</tr>
</thead>
<tbody>
<tr v-for='(item, index) in classTableData' :key='index'>
<td>
<p>{{'第' + digital2Chinese(index+1) + '节'}}</p>
<p>{{ item.classesTime }}</p>
</td>
<td v-for='(week, index) in weeks' :key='index'>
{{item[week] || '-'}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
weeks: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
classTableData: [{
'classesTime': '08:00-09:00',
'monday': '物理',
'tuesday': '英语',
'wednesday': '政治',
'thursday': '历史',
'friday': '化学',
'saturday': '历史',
'sunday': '化学'
}, {
'classesTime': '09:00-10:00',
'monday': '生物',
'tuesday': '物理',
'wednesday': '化学',
'thursday': '英语',
'friday': '化学',
'saturday': '生物',
'sunday': '化学'
}, {
'classesTime': '10:00-11:00',
'monday': '生物',
'tuesday': '物理',
'wednesday': '生物',
'thursday': '历史',
'friday': '生物',
'saturday': '英语',
'sunday': '政治'
}, {
'classesTime': '11:00-12:00',
'monday': '',
'tuesday': '政治',
'wednesday': '物理',
'thursday': '政治',
'friday': '历史',
'saturday': '历史',
'sunday': '生物'
}, {
'classesTime': '13:00-14:00',
'monday': '生物',
'tuesday': '历史',
'wednesday': '历史',
'thursday': '历史',
'friday': '',
'saturday': '英语',
'sunday': '化学'
}, {
'classesTime': '14:00-15:00',
'monday': '化学',
'tuesday': '英语',
'wednesday': '物理',
'thursday': '化学',
'friday': '语文',
'saturday': '物理',
'sunday': '英语'
}, {
'classesTime': '15:00-16:00',
'monday': '历史',
'tuesday': '历史',
'wednesday': '语文',
'thursday': '历史',
'friday': '生物',
'saturday': '英语',
'sunday': ''
}],
tableShow: false
};
},
created() {
// /* mock随机数据*/
// Mock.mock({
// 'data|7': [
// {
// 'classesTime|+1': ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'],
// 'monday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
// 'tuesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
// 'wednesday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
// 'thursday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
// 'friday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
// 'saturday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文'],
// 'sunday|1': ['生物', '物理', '化学', '政治', '历史', '英语', '', '语文']
// }
// ]
// });
},
methods: {
/**
* 数字转中文
* @param {Number} num 需要转换的数字
* @param {String} identifier 标识符
* @returns {String} 转换后的中文
*/
digital2Chinese(num, identifier) {
const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
}
}
};
</script>
<style scoped>
.class-table {
.table-wrapper {
width: 100%;
height: 100%;
overflow: auto;
}
.tabel-container {
margin: 7px;
table {
table-layout: fixed;
width: 100%;
thead {
background-color: #67a1ff;
th {
color: #fff;
line-height: 17px;
font-weight: normal;
}
}
tbody {
background-color: #eaf2ff;
td {
color: #677998;
line-height: 12px;
}
}
th,
td {
width: 60px;
padding: 12px 2px;
font-size: 12px;
text-align: center;
}
tr td:first-child {
color: #333;
.period {
font-size: 8px;
}
}
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
方案三
根据随机周数及随机课节数渲染
<template>
<div>
<div>
<div>
<table>
<thead>
<tr>
<th>时间</th>
<th v-for="(weekNum, weekIndex) in weeks" :key="weekIndex"> {{'周' + digital2Chinese(weekNum, 'week')}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(courseNum, courseIndex) in coursesLen" :key="courseIndex">
<td>
<p>{{'第' + digital2Chinese(courseNum) + "节"}}</p>
<p>{{ classTableData.period[courseIndex] }}</p>
</td>
<td v-for="(weekNum, weekIndex) in weeks" :key="weekIndex">
{{ fieldCharacter(weekIndex, courseIndex) }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
weeks: [], //周集合
coursesLen: 0, //最大课节数
classTableData: { //mock模拟的数据
period: ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'], //时间段
weekCourse: [
{
'week': 0,
'courses': [
{ 'index': 1, 'title': '物理' },
{ 'index': 3, 'title': '语文' }
]
},
{
'week': 1,
'courses': [
{ 'index': 3, 'title': '生物' },
{ 'index': 4, 'title': '语文' },
{ 'index': 5, 'title': '历史' },
{ 'index': 6, 'title': '数学' },
{ 'index': 7, 'title': '英语' },
{ 'index': 8, 'title': '生物' },
{ 'index': 1, 'title': '生物' }
]
},
{
'week': 3,
'courses': [
{ 'index': 5, 'title': '英语' },
{ 'index': 6, 'title': '英语' },
{ 'index': 7, 'title': '物理' },
{ 'index': 8, 'title': '英语' },
{ 'index': 1, 'title': '生物' },
{ 'index': 2, 'title': '数学' },
{ 'index': 3, 'title': '英语' }
]
},
{
'week': 4,
'courses': [
{ 'index': 4, 'title': '语文' },
{ 'index': 5, 'title': '英语' },
{ 'index': 6, 'title': '生物' },
{ 'index': 7, 'title': '历史' }
]
},
{
'week': 5,
'courses': [
{ 'index': 8, 'title': '化学' },
{ 'index': 1, 'title': '英语' }
]
}
]
}
}
},
created() {
this.updateData();
this.initWeekCourses();
},
methods: {
/**
* 更新mock模拟的数据，对数据进行排序
*/
updateData() {
/* 将数据按从周日到周六排序 */
this.classTableData.weekCourse.sort((a, b) => {
return a.week - b.week;
});
/* 将数据按从第一节到第n节排序 */
for (let v of this.classTableData.weekCourse) {
for (let k in v) {
if (k === 'courses') {
v[k].sort((a, b) => {
return a.index - b.index;
});
}
}
}
console.log(JSON.stringify(this.classTableData.weekCourse));
},
/**
* 计算周数据及课节数
*/
initWeekCourses() {
const that = this;
this.weeks = []; //周集合
this.coursesLen = 0; //最大的课节数
this.weeks = this.classTableData.weekCourse.map((item, index) => {
for (let k in item) {
if (k === 'courses') {
let maxCoursesLen = 0;
/* 取出一周中最大的课节数及当天的最大课节数 */
for (let j of item[k]) {
j.index > that.coursesLen && (that.coursesLen = j.index); //取所有一周里最大课节值
j.index > maxCoursesLen && (maxCoursesLen = j.index); //取当天最大课节值
}
/* 如果当天的课节总数小于当天的最大课节值 */
if (item[k].length < maxCoursesLen) {
for (let i = 0; i < maxCoursesLen; i++) { //以最大课节值为终点遍历当天课节
if (!item[k][i] || item[k][i].index != (i + 1)) { //如果下标课节不存在或着与循环的下标不匹配
item[k].splice(i, 0, ''); //填充空课节
}
}
}
}
}
return item.week;
});
console.log(JSON.stringify(this.classTableData.weekCourse));
},
/**
* 处理格子数据，无数据转换为字符串'-'
* @param {Number} weekIndex 周几对应的下标
* @param {Number} courseNum 第几节课对应的下标
* @returns {String} 返回对应的字符
*/
fieldCharacter(weekIndex, courseIndex) {
if (
this.classTableData.weekCourse[weekIndex]
&&
this.classTableData.weekCourse[weekIndex].courses[courseIndex]
&&
this.classTableData.weekCourse[weekIndex].courses[courseIndex].index === courseIndex + 1
) {
return this.classTableData.weekCourse[weekIndex].courses[courseIndex].title;
}
return '-';
},
/**
* 数字转中文
* @param {Number} num 需要转换的数字
* @param {Boolean} identifier 标识符
* @returns {String} 转换后的中文
*/
digital2Chinese(num, identifier) {
const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num];
},
}
};
</script>
<style scoped>
.class-table {
.table-wrapper {
width: 100%;
height: 100%;
overflow: auto;
}
.tabel-container {
margin: 7px;
table {
table-layout: fixed;
width: 100%;
thead {
background-color: #67a1ff;
th {
color: #fff;
line-height: 17px;
font-weight: normal;
}
}
tbody {
background-color: #eaf2ff;
td {
color: #677998;
line-height: 12px;
}
}
th,
td {
width: 60px;
padding: 12px 2px;
font-size: 12px;
text-align: center;
}
tr td:first-child {
color: #333;
.period {
font-size: 8px;
}
}
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237