寻求支持标记时段不可用的Vue.js小时预约选择组件

嘿，我太懂你要的这种工具了——就是那种以日期为列、小时为行的表格布局，能清晰标记哪些时段已被预约（不可选）、哪些还空闲的组件对吧？之前你找的普通日期选择器确实满足不了这种精细化的时段管理需求，我给你两个方向的解决方案：

一、现成组件推荐 #

有几个专门做预约/排班的Vue组件刚好符合你的需求，不用自己从零写：

• Vue Scheduler：这类组件原生支持按日期和时段划分单元格，你可以直接把已预约的时段数据传入，它会自动标记这些单元格为不可用状态，还支持点击空闲单元格触发预约操作，完全适配你的场景。
• Vue Calendar Scheduler：同样是表格式的排班组件，支持自定义时段范围（比如只显示工作日的9-18点），并且能通过数据绑定轻松控制每个单元格的可用状态，样式也可以自定义调整。

这些组件都能直接处理“某日期某时段被预约后，其他用户无法选择”的核心需求，不用再自己写复杂的状态判断逻辑。

二、如果想自己实现（快速版） #

要是现成组件的样式或功能不完全贴合你的需求，自己写个简易版也不难，核心思路就是用Vue的循环渲染生成表格：

模板部分 #

<table class="booking-table">
  <thead>
    <tr>
      <th>时段</th>
      <!-- 渲染日期列 -->
      <th v-for="date in displayDates" :key="date">{{ date }}</th>
    </tr>
  </thead>
  <tbody>
    <!-- 渲染小时行 -->
    <tr v-for="hour in displayHours" :key="hour">
      <td>{{ hour }}:00</td>
      <!-- 每个日期+小时的单元格 -->
      <td 
        v-for="date in displayDates" 
        :key="`${date}-${hour}`"
        :class="{ 'booked': isBooked(date, hour), 'available': !isBooked(date, hour) }"
        @click="!isBooked(date, hour) && handleBooking(date, hour)"
      >
        {{ isBooked(date, hour) ? '已预约' : '可预约' }}
      </td>
    </tr>
  </tbody>
</table>

脚本部分 #

export default {
  data() {
    return {
      // 要展示的日期列表，比如接下来3天
      displayDates: ['2025-02-21', '2025-02-22', '2025-02-23'],
      // 要展示的小时范围，比如9点到18点
      displayHours: Array.from({length: 9}, (_, i) => i + 9),
      // 已预约的时段，格式为「日期-小时」
      bookedSlots: ['2025-02-21-14'] // 对应2月21日14点已预约
    }
  },
  methods: {
    isBooked(date, hour) {
      return this.bookedSlots.includes(`${date}-${hour}`)
    },
    handleBooking(date, hour) {
      // 这里写预约逻辑，比如把当前时段加入已预约列表
      this.bookedSlots.push(`${date}-${hour}`)
    }
  }
}

样式部分（示例） #

.booking-table {
  border-collapse: collapse;
  width: 100%;
}
.booking-table th, .booking-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.booked {
  background-color: #eee;
  cursor: not-allowed;
}
.available {
  background-color: #d4edda;
  cursor: pointer;
}

这个简易版完全能实现你要的核心功能：标记已预约时段不可点击，点击空闲时段完成预约，而且样式和功能都能根据你的需求随意调整。

内容的提问来源于stack exchange，提问作者Danon