一、概述

根據專案需求：

1. 開始時間必須小於結束時間，不能等於結束時間。

2. 結束時間必須小於開始時間，不能相等。

2. 開始時間和結束時間，最小間隔30分鐘。

3. 時間範圍從00:00~24:00

4. 預設範圍08:00~18:00

二、程式碼實現

test.vue

<template>
  <div>
    <el-form ref="params" :model="params" label-width="80px">
      <div>開放時間</div>
      <div>
        <el-time-select
          
 
style="width:130px;"
          :clearable="false"
          placeholder="起始時間"
          v-model="params.startTime"
          :picker-options="{
              start: '00:00',
              step: '00:30',
              end:params.endTime?params.endTime:'23:59',
              maxTime: params.endTime
          }"
 
>
        </el-time-select>
        <el-time-select
          style="width:130px;"
          placeholder="結束時間"
          :clearable="false"
          v-model="params.endTime"
          :picker-options="{
              start: params.startTime?params.startTime:'00:00',
              step: '00:30',
              end:'24:00',
              minTime: params.startTime
            }"
 
>
        </el-time-select>
      </div>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        params:{
          startTime: '08:00',//訪客通行開始時間
          endTime: '18:00',//訪客通行結束時間
        }
      }
    },
  }
</script>
<style scoped>

</style>

注意：

step: '00:30' 表示間隔半小時

minTime: params.startTime 表示可以選擇的最小時間，小於開始時間。

效果如下：

可以發現，結束時間08:00是灰色，不可選。

本文參考連結：

https://element.eleme.cn/#/zh-CN/component/time-picker