vue实现table课程表
方案一根据随机周数及随机课节数渲染<template><div class="class-table"><div class="table-wrapper"><div class="tabel-container"><table>...
·
方案一
采用二维数组，固定显示每周7天及固定课节数，无数据的天及课节也会固定占位
<template>
<div class="class-table">
<div class="table-wrapper">
<div class="tabel-container">
<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 class="period">{{ 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 lang="scss" 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>
方案二
固定显示每周7天及固定课节数，无数据的天及课节也会固定占位
<template>
<div class='class-table'>
<div class='table-wrapper'>
<div class='tabel-container'>
<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 class='period'>{{ 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 lang='scss' 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>
方案三
根据随机周数及随机课节数渲染
<template>
<div class="class-table">
<div class="table-wrapper">
<div class="tabel-container">
<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 class="period">{{ 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 lang="scss" 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>
前往低代码交流专区
更多推荐
14
0- 0
已为社区贡献24条内容
所有评论(0)