如何在动态添加时间范围时置灰已选择时间？
问题描述：
需要实现一个功能，在可以动态添加和删除时间范围的界面中，当选择一个时间范围时，用户可以选择的时间范围应根据已选择的时间进行调整，并且已选择的时间应置为不可选。
问题分解：
- 选择时间范围后，小于开始时段的值置灰无法选择。
- 选择时间范围后，前边已选的数据置灰无法选择，第二条的数据选择只能在指定的范围内。
- 点击新增时，前边已选的数据置灰无法选择，第三条的数据选择只能在指定的范围内依次类推。
- 删除某行数据时，已删除的数据要重新进行可选和置灰操作。
解决方案：
父组件：
- 父组件维护一个包含所有已选择时间范围的数组 alladddata，用于记录已选择的时间范围。
- 在添加新时间范围时，从 alladddata 中移除重复的时间范围，确保时间范围不重复。
- 根据 alladddata 禁用相应的开始时间和结束时间选项，确保用户无法选择已选择的时间范围。
子组件：
- 子组件维护一个用于显示和编辑时间范围的表格。
- 在开始时间选项中，根据父组件提供的 alladddata 禁用小于当前开始时间的值。
- 在结束时间选项中，根据父组件提供的 alladddata 禁用大于当前开始时间小于当前结束时间的值。
- 保存时，将表格中填写的有效时间范围返回给父组件。
代码示例：
父组件：
export default {
...
data() {
return {
...
alladddata: [], // 存储所有已选时间段
}
},
...
methods: {
handledisable() {
...
// 根据已选时间范围，禁用开始时间和结束时间选项
}
}
}子组件：
export default {
...
mounted() {
// 初始化选项禁用状态
this.handleDisable()
},
...
methods: {
handleStartChange(time) {
...
// 根据已选时间范围，禁用结束时间选项
},
handleDisable() {
...
// 根据已选时间范围，禁用开始时间和结束时间选项
}
}
}使用示例：
通过将子组件嵌入父组件中，并处理父子组件之间的通信（例如，父组件向子组件提供 alladddata，子组件向父组件返回更新的时间范围），即可实现动态添加和删除时间范围，并限制用户选择已选择的时间范围的功能。
