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

最新推荐文章于 2024-05-30 11:27:58 发布

today喝咖啡了吗

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量250

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiao_qiang666/article/details/138312474

版权

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

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="{
                  start: '00:00',
                  step: '00:15',
                  end: '24:00',
                  minTime: operationForm.startTime,
                }"
              >
              </el-time-select>
              <el-button
                type="primary"
                size="small"
                @click="addDatetime(operationForm)"
                >添加</el-button
              >
            </el-form-item>

js中:

  data() {
    return {
        timeList: [],
   }}，
methods：{
 // 辅助函数，将时间字符串转换为分钟数
    timeToMinutes(timeStr) {
      const [hours, minutes] = timeStr.split(":").map(Number);
      return hours * 60 + minutes;
    },
    //添加时间段
    addDatetime(form) {
      let timer = {
        startTime: form.startTime,
        endTime: form.endTime,
      };
      let timeListNew = JSON.parse(JSON.stringify(this.timeList));
      let startMinNew = null;

      if (timeListNew.length >= 1) {
        startMinNew = this.timeToMinutes(timer.startTime ? timer.startTime : 0);
        // 验证是否与已有时间段重合
        if (
          timeListNew.every(
            (item) => this.timeToMinutes(item.endTime) >= startMinNew
          )
        ) {
          this.$message.error("新时间段小于已有时间段，请重新选择");
          return;
        } else {
          this.timeList.push(timer);
          this.operationForm.startTime = "";
          this.operationForm.endTime = "";
          timer = { startTime: "", endTime: "" }; // 清空输入
        }
      } else {
        this.timeList.push(timer);
        timer = { startTime: "", endTime: "" }; // 清空输入
        this.operationForm.startTime = "";
        this.operationForm.endTime = "";
      }
      // this.timeList.push(timer);
      console.log("this.timeList", this.timeList);
    },
}