时间段增减，已选时间段不可再被选

最新推荐文章于 2024-02-01 17:28:58 发布

路漫漫--

最新推荐文章于 2024-02-01 17:28:58 发布

阅读量669

点赞数

CC 4.0 BY-SA版权

分类专栏：毒蘑菇文章标签： vue js vue.js

本文链接：https://blog.csdn.net/qq_40597889/article/details/105975362

毒蘑菇专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在多个时间选择器中避免时间冲突的方法。通过禁用已选时间段内的选项，确保不同选择器间的时间不重叠。适用于会议安排、课程表等场景，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要实现功能：第一个选了4：30-16：00 第二个就不能选这时间段的
在这里插入图片描述
实现上还有问题，不想代码丢失，备份一下，如果要用，请自己修改changeStartDisabled及changeEndDisabled事件。

<template>
    <div>
        <el-button @click="add" size="mini">+</el-button>
        <div v-for="(i, iIndex) in list" :key="iIndex">
            <el-select v-model="i.startTime" placeholder="开始时间" size="mini" @focus="changeStartDisabled(iIndex)">
                <el-option
                v-for="(t, index) in timeStr"
                :key="index"
                :label="t"
                :value="index+1"
                :disabled="(i.endTime ? index+2 > i.endTime : null) || startDisabled.indexOf(index+1) > -1">
                </el-option>
            </el-select>
            <el-select v-model="i.endTime" placeholder="结束时间" size="mini" @focus="changeEndDisabled(iIndex)">
                <el-option
                v-for="(t, index) in timeStr"
                :key="index"
                :label="t"
                :value="index+1"
                :disabled="index < i.startTime || endDisabled.indexOf(index+1) > -1">
                </el-option>
            </el-select>
            <el-button @click="del(index)" size="mini">-</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            list: [
                {
                    startTime: '',
                    endTime: ''
                }
            ],
            timeStr: ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30'],
            startDisabled: [],
            endDisabled: []
        }
    },
    methods: {
        add () {
            this.list.push({
                startTime: '',
                endTime: ''
            })
        },
        del (index) {
            this.list.splice(index, 1)
        },
        changeStartDisabled (num) {
            this.startDisabled = []
            this.list.map((i, index) => {
                if (index !== num) {
                    if (this.list[num].startTime >= i.endTime) {
                        for (let j = 0; j < i.endTime; j++) {
                            this.startDisabled.push(j)
                        }
                    } else {
                        for (let j = i.startTime; j < i.endTime; j++) {
                            this.startDisabled.push(j)
                        }
                    }
                }
            })
        },
        changeEndDisabled (num) {
            this.endDisabled = []
            this.list.map((i, index) => {
                if (index !== num) {
                    if (this.list[num].startTime < i.startTime) {
                        for (let j = i.startTime + 1; j < 49 - index; j++) {
                            this.endDisabled.push(j)
                        }
                    } else {
                        for (let j = i.startTime + 1; j < i.endTime; j++) {
                            this.endDisabled.push(j)
                        }
                    }
                }
            })
        }
    }
}
</script>