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

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

问题：

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

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. 删除已选数据时，该时间范围重新置为可选。

以上就是动态添加时间范围，如何实现已选时间置灰？的详细内容，更多请关注抖狐科技其它相关文章！