动态添加时间范围时，如何实现已选择时间的置灰功能？

// ...省略部分代码...

methods: {
  // 新增数据，打开时间范围选择弹窗
  handleformedit(list, index) {
    let arr = deepclone(this.tabledata),
      brr = [];
    brr = arr
      .filter((item) => item.season === list.season)
      .map((item) => item.timelist)
      .flat();
    this.idx = index;
    this.showadddialog = {
      visible: true,
      title: "编辑",
      data: brr,
      list: list.timelist,
    };
  },
  // 获取时间范围选择弹窗提交的数据，并更新列表数据
  getaddresult(list) {
    this.tabledata[this.idx].timelist = list;
  },
},

// ...省略部分代码...

computed: {
  // 获取默认的1-24小时数据
  timeOptions() {
    return devideTimes(30, 2);
  },
  startTimeList() {
    return this.timeOptions.map((item) => ({
      value: item,
      label: item,
      disabled: false,
    }));
  },
  endTimeList() {
    return this.timeOptions.map((item) => ({
      value: item,
      label: item,
      disabled: false,
    }));
  },
},
methods: {
  // 处理添加行，新增一条时间范围
  handleRowAdd(row, idx) {
    // ...省略部分代码...

    this.handleDisable();
    // 判断开始时间所有项全部是不是禁用状态，如果是则说明所有时段已选择，否则未全部选择
    let flag = this.startTimeList.every((item) => item.disabled);

    if (flag) {
      this.$message.warning("所有时段都已选择");
      return false;
    }
    if (!row.startTime && !row.endTime) {
      this.$message.warning("开始时段和结束时段必填");
      return false;
    }
    this.tableData[idx].disabled = true;
    this.tableData.push({
      startTime: "",
      endTime: "",
    });
  },
  // 处理删除行，删除一条时间范围
  handleRowDelete(row, index) {
    // ...省略部分代码...

    this.handleDisable();
  },
  // 处理数组对象去重，确保时间范围唯一
  handleUnique(arr) {
    let obj = {};
    return arr.reduce((cur, next) => {
      obj[next.startTime + next.endTime]
        ? ""
        : (obj[next.startTime + next.endTime] = true && cur.push(next));
      return cur;
    }, []);
  },
  // 切换起始时间，动态更新禁用状态
  handleStartChange(time) {
    let times = this.timeOptions;
    // ...省略部分代码...
  },
  // 禁止时间交集，确保不同时间段不重叠
  handleDisable() {
    let times = this.timeOptions;
    // ...省略部分代码...

    // 将开始时段所有选项置为可用
    this.startTimeList.forEach((start) => {
      start.disabled = false;
    });

    // 遍历所有已选时间段
    this.allAddData.forEach((item) => {
      let start_index = times.findIndex((value) => value === item.startTime);
      let end_index = times.findIndex((value) => value === item.endTime);
      this.startTimeList.forEach((start, i) => {
        if (i >= start_index && i <= end_index) {
          start.disabled = true;
        }
      });
    });
  },
},