动态添加时间范围，如何置灰已选择时间？
问题：
需要动态添加时间范围，要求满足以下条件：
开始时段小于结束时段。后续添加的时间范围内，前面已选择的时间置灰不可选。删除某行已选的时间后，该时间范围重新置为可选。
解决方案：
方案基于 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 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 { start.disabled = false; }); ... }, ...},
交互流程：
点击 “添加一行数据” 按钮，打开新增对话框。在对话框中动态添加时间范围。当开始时段选择后，小于开始时段的值置灰不可选。点击新增时，前边已选的数据置灰不可选，新数据只可以选择未置灰的时间段。删除已选数据时，该时间范围重新置为可选。
以上就是动态添加时间范围，如何实现已选时间置灰？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1497272.html
微信扫一扫 
支付宝扫一扫 
