el-time-select如何设置多个时间段，且每个时间段之间不相互重合

today喝咖啡了吗

已于 2024-06-13 08:50:01 修改

阅读量1.2k

点赞数 4

文章标签： vue.js javascript 前端

于 2024-04-29 14:38:21 首次发布

本文链接：https://blog.youkuaiyun.com/xiao_qiang666/article/details/138312474

版权

这篇文章介绍了如何在Vue.js应用中使用ElementUI的时间选择器创建并管理报警时间，确保新添加的时间段不会与已存在的时间段冲突，通过数据绑定和方法实现时间验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击添加按钮，会判断是否与已有时间段重合
实现效果：

template中：

 <el-form-item label="报警时间" prop="timeList">
              <el-time-select
                placeholder="起始时间"
                style="width: 45%"
                v-model="operationForm.startTime"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '24:00',
                }"
              >
              </el-time-select>
              <el-time-select
                style="width: 45%"
                placeholder="结束时间"
                v-model="operationForm.endTime"
                :picker-options="{