
动态添加时间范围,如何置灰已选择时间?
问题:
在时间范围选择界面中,需要实现以下规则:
- 开始时段选择后,结束时段的值小于开始时段的置灰不能选择。
- 选择了多个时间段后,已选的时间段置灰不能选择。
解决方法:
父组件代码示例:
编辑 删除
子组件(editdialog.vue)代码示例:
规则实现原理:
子组件 editdialog 负责管理时间范围的编辑,其中包含了输入开始时段、结束时段和备注的表单。
validatetimerange 函数用于校验时间范围的合法性,规则如下:
- 开始时段不能大于等于结束时段。
- 时间范围不能与已有的时间范围交叉。
主组件 table 中的 handleedit 方法负责打开编辑对话框,传递当前选中的时间范围供子组件编辑。
handlesave 方法负责将编辑后的时间范围数据保存到主组件中,并将对话框关闭。










