vue渲染5行五列的48个时段

A：

<template>
  <div class="schedule">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Time</th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="i in 48" :key="i">
          <td class="time">{{ getTime(i) }}</td>
          <td class="days" v-for="j in 5" :key="j"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    getTime(index) {
      const ampm = index < 24 ? "am" : "pm";
      const hour = index % 12 === 0 ? 12 : index % 12;
      const minute = index % 2 === 0 ? "00" : "30";
      return `${hour}:${minute}${ampm}`;
    },
  },
};
</script>

<style scoped>
.schedule {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.time {
  font-weight: bold;
}

.days {
  background-color: #f2f2f2;
}
</style>

以上代码是用 Vue 渲染 5 行 5 列的 48 个时段的表格。每个时段的时间是通过 getTime 方法计算得到的，然后在表格的第一列显示。表格的第一行是表头，包含星期一至星期五的信息。其他列都是空的，你可以根据具体需求填充相应的数据。注意，在 CSS 样式中使用了 scoped 关键字来限定样式的范围，避免样式冲突。