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

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

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

问题:

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

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

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