动态添加时间范围,如何实现已选时间置灰?
动态添加时间范围,如何置灰已选择时间?
问题:
需要动态添加时间范围,要求满足以下条件:
- 开始时段小于结束时段。
- 后续添加的时间范围内,前面已选择的时间置灰不可选。
- 删除某行已选的时间后,该时间范围重新置为可选。
解决方案:
方案基于 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; }); ... }, ... },
交互流程:
- 点击 "添加一行数据" 按钮,打开新增对话框。
- 在对话框中动态添加时间范围。
- 当开始时段选择后,小于开始时段的值置灰不可选。
- 点击新增时,前边已选的数据置灰不可选,新数据只可以选择未置灰的时间段。
- 删除已选数据时,该时间范围重新置为可选。
以上就是动态添加时间范围,如何实现已选时间置灰?的详细内容,更多请关注硕下网其它相关文章!