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

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《动态添加时间范围，如何实现已选时间置灰？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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

问题：

需要动态添加时间范围，要求满足以下条件：

1. 开始时段小于结束时段。
2. 后续添加的时间范围内，前面已选择的时间置灰不可选。
3. 删除某行已选的时间后，该时间范围重新置为可选。

解决方案：

方案基于 vue.js 框架实现，包括父组件和子组件：

父组件

• 负责管理表格和新增数据对话框。

• 关键代码：

  mounted() {
  const season = ["春季", "夏季"];
  const period = ["尖峰", "高峰", "低谷"];
  this.tabledata = array.from({ length: season.length }, (_, i) =>
    period.map((pj, j) => ({
      season: season[i],
      period: pj,
      timelist: [],
    }))
  ).flat();
  this.merge(this.tabledata);
  },
  methods: {
  // 表格行合并方法
  merge(tabledata) {
    this.companyarr = [];
    this.companypos = 0;
    for (let i = 0; i < tabledata.length; i++) {
      if (i === 0) {
        this.companyarr.push(1);
        this.companypos = 0;
      } else {
        if (tabledata[i].season === tabledata[i - 1].season) {
          this.companyarr[this.companypos] += 1;
          this.companyarr.push(0);
        } else {
          this.companyarr.push(1);
          this.companypos = i;
        }
      }
    }
  },
  // 新增数据
  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,
    };
  },

子组件

• 负责添加和修改时间范围。

• 关键代码：

  watch: {
    showAddDialog: {
      handler(newVal, oldVal) {
        this.tableData = [];
        if (newVal.list.length) {
          this.tableData = newVal.list.map((item) => ({
            ...item,
            disabled: true,
          }));
        } else {
          this.tableData = [{ startTime: "", endTime: "" }];
        }
        ...
      },
      deep: true,
    },
  },
  computed: {
    ...
    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: {
    ...
    handleStartChange(time) {
      let times = this.timeOptions;
      ...
      for (let i = start_index + 1; i < this.startTimeList.length; i++) {
        if (this.startTimeList[i].disabled) {
          ...
        } else {
          this.endTimeList[i].disabled = false;
        }
      }
    },
    handleDisable() {
      let times = this.timeOptions;
      ...
      this.startTimeList.forEach((start) => {
        start.disabled = false;
      });
      ...
    },
    ...
  },

交互流程：

1. 点击 "添加一行数据" 按钮，打开新增对话框。
2. 在对话框中动态添加时间范围。
3. 当开始时段选择后，小于开始时段的值置灰不可选。
4. 点击新增时，前边已选的数据置灰不可选，新数据只可以选择未置灰的时间段。
5. 删除已选数据时，该时间范围重新置为可选。

到这里，我们也就讲完了《动态添加时间范围，如何实现已选时间置灰？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！