Vue项目实战——【基于 Vue3.x + NodeJS】实现的课程表排课系统三（duration-title）

【基于 Vue3.x + NodeJS】实现的课程表排课系统三

---

优化一下左侧一列单元格（显示时间的第一列）

实现效果：

DurationTitle

ScheduleTable/index.vue中

<!-- <td>{ { item.title }}</td> -->

这列单元格就是上面图中最左侧单元格的渲染语句，但是此时没有上图的背景颜色以及文字颜色，将其封装到一个组件中，引入代替<!-- <td>{ { item.title }}</td> -->

替代代码

<duration-title :title="item.title"></duration-title>

也要在index.vue的script标签中引入该组件，代码如下：

import DurationTitle from "./DurationTitle";

DurationTitle.vue

<template>
  <td class="duration-title">{
  { title }}</td>
</template>

<script setup>
import "./styles/duration-title.scss";
const props = defineProps({
     
  title: String,
});
</script>

duration-title.scss

.duration-title {
   
    color: #856404;
    background-color: #fff3cd;
}

在前一篇博客拿数据的方式只是浅拿一下 看下数据，所以要修改一下
在ScheduleTable/scripts/hooks.js

import {
    reactive } from "vue";

const data = reactive({
   
  schedule: [], // 数据 每次取数据要遍历 麻烦 可能要用到策略模式
  duration: [],
  teacher: [],
  course: [],
  formData: [], // 提交数据可能要用到
});

export function useInitialData() {
   
  function setInitialData({
     schedule, course, duration, teacher }) {
   
    data.duration = duration;
    data.schedule = schedule;
    data.course = course;
    data.teacher = teacher;
  }

  function setSchedule({
     type, result }) {
   }