el-time-select 动态增加时间

本文主要是介绍el-time-select 动态增加时间，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

<template><div><div v-for="(item, index) in timeSlots" :key="index"><el-time-select placeholder="起始时间" v-model="item.startTime" :picker-options="{start: '00:00',step: '00:15',end: '23:59',}"></el-time-select><el-time-select placeholder="结束时间" v-model="item.endTime" :picker-options="{start: '00:00',step: '00:15',end: '24:00',minTime: item.startTime}"></el-time-select><el-button type="danger" @click="removeTimeSlot(index)">删除</el-button></div><el-button type="primary" @click="addTimeSlot">增加</el-button><el-button type="success" @click="saveTimeSlots">确定</el-button></div>
</template><script>
export default {data() {return {timeSlots: [{startTime: '',endTime: ''}]};},methods: {addTimeSlot() {if (this.timeSlots.length >= 10) {this.$message.error('最多只能设置10条规则');return;}const newEndTime = this.timeSlots[this.timeSlots.length - 1].endTime || '';this.timeSlots.push({startTime: newEndTime,endTime: ''});},removeTimeSlot(index) {this.timeSlots.splice(index, 1);},saveTimeSlots() {if (this.timeSlots.some(slot => !slot.startTime || !slot.endTime)) {this.$message.error('每条规则数据不能为空');return;}for (let i = 0; i < this.timeSlots.length; i++) {const start = this.parseTime(this.timeSlots[i].startTime);const end = this.parseTime(this.timeSlots[i].endTime);if (start >= end) {this.$message.error(`第${i + 1}条的开始时间必须小于结束时间`);return;}if (i > 0 && this.timeSlots[i - 1].endTime > this.timeSlots[i].startTime) {this.$message.error('上一条的结束时间要小于等于下一条的开始时间');return;}}console.log('保存的时间段:', this.timeSlots);},parseTime(time) {const [hours, minutes] = time.split(':').map(Number);return hours * 60 + minutes;},}
}
</script><style scoped>
.el-time-select {margin-right: 10px;
}
</style>