怎么用js或者vue做预约的这么一个功能？如图？

Question

比如说：00：00-23:00，房间1可以选择至少两个连续的框就预约了那个时间段

用vue的话不知道数据应该是什么样子的，怎么获取选中的时间

类似这个样子

Answer 1

<template>
    <table>
        <thead>
            <tr>
                <th>room</th>
                <th colspan="24">2022-09-27</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in rooms" :key="index">
                <td>{{item.name}}</td>
                <td v-for="(item2, index2) in times" :key="index2" @click="clickRoom(index, index2)" :class="{'ys': item.sjs.indexOf(item2.time) != -1}">{{item2.time}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
import {ref, reactive} from "vue";

export default {
    setup() {

        const times = reactive([]);
        for (let i = 0; i < 24; i++) {
            times.push({
                time: (i < 10 ? 0 : '') + (i + ':00'),
                use: false
            })
        }

        const rooms = ref([
            {
                name: 'room1',
                sjs: []
            },
            {
                name: 'room2',
                sjs: []
            }
        ]);

        const clickRoom = (index, index2) => {
            if (!times[index2].use) {
                times[index2].use = !times[index2].use;
                rooms.value[index].sjs.push(times[index2].time);
            }
        }

        return {rooms, times, clickRoom}
    },
}
</script>

<style scoped>
table {
    border: #0a2d2a solid 1px;
    width: 60%;
    text-align: center;
}
th, td {
    border: #0a2d2a solid 1px;
}
.ys {
    background: #0aa7ef;
}
</style>

增加再次点击去掉

<template>
    <table>
        <thead>
            <tr>
                <th>room</th>
                <th colspan="24">2022-09-27</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in rooms" :key="index">
                <td>{{item.name}}</td>
                <td v-for="(item2, index2) in times" :key="index2" @click="clickRoom(index, index2)" :class="{'ys': item.sjs.indexOf(item2.time) != -1}">{{item2.time}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
import {reactive} from "vue";

export default {
    setup() {

        const times = reactive([]);
        for (let i = 0; i < 24; i++) {
            times.push({
                time: (i < 10 ? 0 : '') + (i + ':00'),
                use: false
            })
        }

        const rooms = reactive([
            {
                name: 'room1',
                sjs: []
            },
            {
                name: 'room2',
                sjs: []
            }
        ]);

        const clickRoom = (index, index2) => {
            if (!times[index2].use) {
                times[index2].use = true;
                rooms[index].sjs.push(times[index2].time);
            } else {
                const seq = rooms[index].sjs.findIndex(item => item == times[index2].time);
                if (seq != -1) {
                    times[index2].use = false;
                    rooms[index].sjs.splice(seq, 1);
                }
            }
        }

        return {rooms, times, clickRoom}
    },
}
</script>

<style scoped>
table {
    border: #0a2d2a solid 1px;
    width: 60%;
    text-align: center;
}
th, td {
    border: #0a2d2a solid 1px;
}
.ys {
    background: #0aa7ef;
}
</style>

我这个一看就是新手写的，别笑，效果应该没错，建议找一个高手给你写，应该没这么复杂，但是我这个应该容易看懂，高手写的我这新手一般看不懂。哈哈

<template>
    <table>
        <thead>
            <tr>
                <th>room</th>
                <th colspan="24">2022-09-27</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in rooms" :key="index">
                <td>{{item.name}}</td>
                <td v-for="(item2, index2) in times" :key="index2" @click="clickRoom(index, index2)" :class="{'ys': rooms[index].sjs.indexOf(index2) != -1}">{{(index2 < 10 ? 0 : '') + (index2 + ':00')}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
import {reactive} from "vue";

export default {
    setup() {

        const times = reactive([]);
        for (let i = 0; i < 24; i++) {
            times.push(false);
        }

        const rooms = reactive([
            {
                name: 'room1',
                sjs: []
            },
            {
                name: 'room2',
                sjs: []
            }
        ]);

        const xiaoTime = (index, index2, type) => {
            let time;
            if (rooms[index].sjs && rooms[index].sjs.length > 0) {
                const arr = rooms[index].sjs.sort(function (a, b) {
                    return a - b;
                });
                if (type && type == 1) {
                    time = arr.find(o => o > index2);
                } else {
                    time = arr.find(o => o < index2);
                }
            }
            return time;
        }

        const clickRoom = (index, index2) => {
            if (!times[index2]) {
                const d = xiaoTime(index, index2, 1);
                const x = xiaoTime(index, index2);

                if (d) {
                    times.forEach(function(val, index3) {
                        if (!val && index3 > index2 && index3 < d) {
                            console.log(index3)
                            times[index3] = true;
                            rooms[index].sjs.push(index3);
                        }
                    });
                } else {
                    times.forEach(function(val, index3) {
                        if (!val && index3 < index2 && index3 > x) {
                            times[index3] = true;
                            rooms[index].sjs.push(index3);
                        }
                    });
                }

                times[index2] = true;
                rooms[index].sjs.push(index2);
            } else {
                const seq = rooms[index].sjs.findIndex(o => o == index2);
                if (seq > -1) {
                    times[index2] = false;
                    rooms[index].sjs.splice(seq, 1);
                }
            }
        }

        return {rooms, times, clickRoom}
    },
}
</script>

<style scoped>
table {
    border: #0a2d2a solid 1px;
    width: 60%;
    text-align: center;
}
th, td {
    border: #0a2d2a solid 1px;
}
.ys {
    background: #0aa7ef;
}
</style>

可以用CSS覆盖特点来做出不可选择的状态

<template>
    <table>
        <thead>
            <tr>
                <th>room</th>
                <th colspan="24">2022-09-27</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in rooms" :key="index">
                <td>{{item.name}}</td>
                <td v-for="(item2, index2) in times" :key="index2" @click="clickRoom(index, index2)" :class="{'ys-hui': times[index2], 'ys': rooms[index].sjs.indexOf(index2) != -1}">{{(index2 < 10 ? 0 : '') + (index2 + ':00')}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
import {reactive} from "vue";

export default {
    setup() {

        const times = reactive([]);
        for (let i = 0; i < 24; i++) {
            times.push(false);
        }

        const rooms = reactive([
            {
                name: 'room1',
                sjs: []
            },
            {
                name: 'room2',
                sjs: []
            }
        ]);

        const xiaoTime = (index, index2, type) => {
            let time;
            if (rooms[index].sjs && rooms[index].sjs.length > 0) {
                const arr = rooms[index].sjs.sort(function (a, b) {
                    return a - b;
                });
                if (type && type == 1) {
                    time = arr.find(o => o > index2);
                } else {
                    time = arr.find(o => o < index2);
                }
            }
            return time;
        }

        const clickRoom = (index, index2) => {
            if (!times[index2]) {
                const d = xiaoTime(index, index2, 1);
                const x = xiaoTime(index, index2);

                if (d) {
                    times.forEach(function(val, index3) {
                        if (!val && index3 > index2 && index3 < d) {
                            console.log(index3)
                            times[index3] = true;
                            rooms[index].sjs.push(index3);
                        }
                    });
                } else {
                    times.forEach(function(val, index3) {
                        if (!val && index3 < index2 && index3 > x) {
                            times[index3] = true;
                            rooms[index].sjs.push(index3);
                        }
                    });
                }

                times[index2] = true;
                rooms[index].sjs.push(index2);
            } else {
                const seq = rooms[index].sjs.findIndex(o => o == index2);
                if (seq > -1) {
                    times[index2] = false;
                    rooms[index].sjs.splice(seq, 1);
                }
            }
        }

        return {rooms, times, clickRoom}
    },
}
</script>

<style scoped>
table {
    border: #0a2d2a solid 1px;
    width: 60%;
    text-align: center;
}
th, td {
    border: #0a2d2a solid 1px;
}
.ys-hui {
    background: #b8b8b8;
}
.ys {
    background: #0aa7ef;
}
</style>