动态添加时间范围时如何置灰已选择时间？
问题：
我们需要动态添加时间范围，但是需要实现以下功能：
- 开始时间选择后，结束时段小于开始时段的值置灰不能选择。
- 当选择多个时间段时，已选择的时间段置灰不能选择，并且后续添加的时间段只能选择在可选范围内。
- 当删除已选时间段后，已删除的时间段重新变为可选，并且其他时间段的置灰状态也需要更新。
解决方法：
父组件（列表展示）：
// ...省略部分代码...
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;
}
});
});
},
},具体实现：
- 点击列表中的编辑按钮时，打开时间范围选择弹窗，并传入当前时间段数据。
- 弹窗中提供添加和删除行功能，允许用户动态调整时间范围。
- 在添加或删除行时，实时处理禁用状态，保证已选择时间无法再次选择，并且后续添加时间只能在可选范围内。
- 禁用时间交集，避免不同时间段重叠。
- 点击保存按钮后，将更新后的时间范围列表数据返回给父组件，更新列表展示。
通过以上方法，我们可以在动态添加时间范围的同时，实现已选择时间的置灰功能，保证时间范围的正确性和有效性。
