用uniapp写一个可以排课的一周课表,包括可以显示课表,新增呢排课
时间: 2023-05-13 18:05:51 浏览: 207
好的,以下是一个简单的用uniapp编写的一周课表排课程序的代码:
<template>
<div class="schedule">
<div class="weekdays">
<div class="weekday" v-for="(day, index) in weekdays" :key="index">
<div class="day">{{ day }}</div>
<div class="classes">
<div class="class" v-for="(classItem, classIndex) in classes[index]" :key="classIndex">
<div class="class-name">{{ classItem.name }}</div>
<div class="class-time">{{ classItem.time }}</div>
</div>
</div>
<div class="add-class" @click="addClass(index)">+</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
weekdays: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
classes: [
[],
[],
[],
[],
[],
[],
[]
]
};
},
methods: {
addClass(dayIndex) {
let className = prompt("Please enter the name of the class:");
let classTime = prompt("Please enter the time of the class:");
this.classes[dayIndex].push({
name: className,
time: classTime
});
}
}
};
</script>
<style>
.schedule {
display: flex;
flex-direction: column;
align-items: center;
}
.weekdays {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.weekday {
display: flex;
flex-direction: column;
align-items: center;
width: 14%;
border: 1px solid black;
padding: 10px;
}
.day {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.classes {
display: flex;
flex-direction: column;
align-items: center;
}
.class {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
.class-name {
font-size: 16px;
font-weight: bold;
}
.class-time {
font-size: 14px;
}
.add-class {
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
</style>
你可以在这个程序中添加课程,每个课程包括课程名称和时间。你可以在每个星期的每一天添加课程,每个星期有七天。
阅读全文