记录一次 @边城大佬 帮我解决的难题。感激大佬，以下是大佬的主页，大家能够关注下。
https://segmentfault.com/u/ja...

我的项目场景：类型蕴含全年和节令，节令是能够配置的，不论抉择年还是节令，都能够新增需要响应数据，弹窗中有两个下拉框，起始时刻和终止时刻，范畴是0-23，抉择一条信息填写完能够点击保留，点击页面中新增能够关上弹窗从新减少信息
遇到问题：
第一次增加数据：如果起始工夫抉择3，终止工夫抉择6进行保留，下次新增时3-6是不能抉择，而且新抉择的工夫范畴不能蕴含3-6，比方新抉择的起始工夫是1，终止工夫是9，因为1-9蕴含了3-6的局部，所以不能抉择，然而0-3能够抉择，7-10能够抉择。
第二次增加数据：如果起始工夫抉择9，终止工夫抉择14进行保留，这时新增的全副数据是：

hasAddData = [    {startTime: 3, endTime: 6, upValue: 1,downValue: 0.3},    {startTime: 9, endTime: 14, upValue: 0.5,downValue: 0.8},]

下次新增时，只能抉择的数据列表为: [0,1,2],[7,8],[15,16,17,18,19,20,21,22,23]，如果起始时刻抉择0，终止时刻只能是0、1或者2，如果起始时刻抉择是7，终止时刻只能是8。
以此类推，写出起始时刻的下拉框数据和终止时刻的下拉框数据。
弹窗图示：

以下是实现逻辑：

<template>  <div class="addTime">    <el-dialog      title="新增需要响应时段"      :visible.sync="showAddDialog.visible"      :close-on-click-modal="false"      :close-on-press-escape="false"      :modal-append-to-body="false"      :append-to-body="true"      width="450px"      top="20vh"      v-loading="formLoading"    >      <el-form        size="mini"        label-position="left"        label-width="140px"        :model="timeInfoForm"        :rules="timeRules"        ref="timeInfoForm"      >        <el-form-item          label="节令"          prop="season"          v-if="showAddDialog.type === 2"        >          <el-select            v-model="timeInfoForm.season"            placeholder="请抉择节令"            style="width: 245px"            @change="handleSeasonChange"          >            <el-option              v-for="item in seasonList"              :key="item"              :label="item"              :value="item"            ></el-option>          </el-select>        </el-form-item>        <el-form-item label="起始时刻" prop="st">          <el-select            v-model="timeInfoForm.st"            placeholder="请抉择起始时刻"            style="width: 245px; margin-right: 5px"            @change="handleStartChange"          >            <el-option              v-for="item in stList"              :key="item"              :label="item"              :value="item"            ></el-option> </el-select          >时        </el-form-item>        <el-form-item label="终止时刻" prop="et">          <el-select            v-model="timeInfoForm.et"            placeholder="请抉择终止时刻"            style="width: 245px; margin-right: 5px"          >            <el-option              v-for="item in etList"              :key="item"              :label="item"              :value="item"            ></el-option> </el-select          >时        </el-form-item>        <el-form-item label="可上调电负荷比例" prop="up">          <el-input            v-model.trim="timeInfoForm.up"            placeholder="0-1之间"            clearable            style="width: 245px"          >          </el-input>        </el-form-item>        <el-form-item label="可下调电负荷比例" prop="down">          <el-input            v-model.trim="timeInfoForm.down"            placeholder="0-1之间"            clearable            style="width: 245px"          >          </el-input>        </el-form-item>      </el-form>      <div slot="footer">        <el-button type="reset" @click="handleFormCancel" size="small"          >取 消</el-button        >        <el-button type="primary" @click="handleFormSubmit" size="small"          >保 存</el-button        >      </div>    </el-dialog>  </div></template>
export default {  name: "addTime",  props: {    showAddDialog: {      type: Object,      default: () => {},    },  },  data() {    return {      formLoading: false,      timeInfoForm: {        season: "",        st: "",        et: "",        up: "",        down: "",      },      seasonList: [],      hasAddData: [], // 已增加数据    };  },  created() {    // data是父组件传递过去曾经增加的数据    let data = this.$deepClone(this.showAddDialog.data);    // type---> 1年，2节令    if (this.showAddDialog.type == 2) {      // columns是父组件传递过去的节令数据      this.seasonList = this.showAddDialog.columns;      this.timeInfoForm.season = this.seasonList[0];      this.handleDataFormat();    } else {      this.hasAddData = data;    }  },  computed: {    // 获取默认的0-23小时数据    getAllTimeData() {      let arr = [];      for (let i = 0; i <= 23; i++) {        arr.push(i);      }      return arr;    },    // 获取起始时刻的数据    stList() {      return this.getAllTimeData.filter((t) =>        this.hasAddData.every(({ st, et }) => t < st || t > et)      );    },    // 获取终止时刻的数据    etList() {      let start = this.timeInfoForm.st;      let startIndex = this.stList.indexOf(start);      return this.stList.filter(        (t, i) => t >= start && t - start === i - startIndex      );    },  },  methods: {    // 切换起始工夫    handleStartChange() {      this.timeInfoForm.et = "";    },    // 节令格式化数据    handleDataFormat() {      let data = this.$deepClone(this.showAddDialog.data);      // 应用reduce函数，将数据分组      /**        let arr = {          秋季: [            {season: "秋季", st: 12, et: 15, up: 0.2, down: 0.4}            {season: "秋季", st: 18, et: 21, up: 1, down: 1}          ],          冬季: [            {season: "冬季", st: 12, et: 15, up: 0.2, down: 0.4}          ],          秋季: [],          夏季: []        }     */      let arr = data.reduce((prev, curr) => {        let key = curr["season"];        if (!prev[key]) {          prev[key] = [];        }        prev[key].push(curr);        return prev;      }, {});      // 如果该节令下没有数据，则应用默认的0-23小时数据      if (!arr[this.timeInfoForm.season]) {        this.hasAddData = [];      } else {        this.hasAddData = arr[this.timeInfoForm.season];      }    },    // 切换节令    handleSeasonChange(val) {      this.timeInfoForm.season = val;      this.handleDataFormat();    },  },};

次要逻辑是计算出起始时刻和终止时刻，脑子中有一些想法，然而代码总是编写有问题，因而记录下大佬的编码，再次感激边城大佬的帮忙。