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

动态添加时间范围时如何置灰已选择时间？

问题：

我们需要动态添加时间范围，但是需要实现以下功能：

开始时间选择后，结束时段小于开始时段的值置灰不能选择。
当选择多个时间段时，已选择的时间段置灰不能选择，并且后续添加的时间段只能选择在可选范围内。
当删除已选时间段后，已删除的时间段重新变为可选，并且其他时间段的置灰状态也需要更新。

解决方法：

父组件（列表展示）：

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

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;
        }
      });
    });
  },
},

具体实现：

点击列表中的编辑按钮时，打开时间范围选择弹窗，并传入当前时间段数据。
弹窗中提供添加和删除行功能，允许用户动态调整时间范围。
在添加或删除行时，实时处理禁用状态，保证已选择时间无法再次选择，并且后续添加时间只能在可选范围内。
禁用时间交集，避免不同时间段重叠。
点击保存按钮后，将更新后的时间范围列表数据返回给父组件，更新列表展示。

通过以上方法，我们可以在动态添加时间范围的同时，实现已选择时间的置灰功能，保证时间范围的正确性和有效性。

以上就是动态添加时间范围时，如何实现已选择时间的置灰功能？的详细内容，更多请关注硕下网其它相关文章！