前端实现教室课桌布局，可点击选中

前端实现教室课桌布局，可点击选中

提示：本文是vue + ts实现，主要代码为html+css，适用其他技术栈，根据自己代码修改即可

一、HTML所有代码

代码如下（示例）：

<template>
    <div class="alarm">
        <el-row :gutter="20">
            <el-col :span="5">
                <el-row :gutter="20">
                    <el-col :span="12" v-for="item in list['0']" :key="item">
                    <div :class="['seat', data.selectList.indexOf(item) > -1 ? 'active' : '']"  @click="add(item)">{{item}}</div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="2">
                <div class="passage">
                    过道
                </div>
            </el-col>
            <el-col :span="10">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="item in list['1']" :key="item">
                        <div :class="['seat', data.selectList.indexOf(item) > -1 ? 'active' : '']"  @click="add(item)">{{item}}</div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="2">
                <div class="passage">
                    过道
                </div>
            </el-col>
            <el-col :span="5">
                <el-row :gutter="20">
                    <el-col :span="12" v-for="item in list['2']" :key="item">
                        <div :class="['seat', data.selectList.indexOf(item) > -1 ? 'active' : '']" @click="add(item)">{{item}}</div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

二、TS所有代码

代码如下（示例）：

<script lang="ts" setup>
    import { reactive, computed } from 'vue';
    const data = reactive({
        seatList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40], // 模拟后台返回的座位表
        selectList: [] as number [], // 所选座位表id
    })
    // 根据每行多少列拆分数组，目前1行8列(根据自己需求来，如果只有6列修改%8=>%6)
    const list = computed(()=>{
        let arr = [[] as number [],[] as number [],[] as number []]
        for (const key in data.seatList) {
            let item = data.seatList[key]
            // 第一、二列添加到一个数组
            if(item % 8 == 1 || item % 8 == 2){
                arr['0'].push(item)
            // 第七、八列添加打一个数组, ==7位列数减一(根据自己需求来)
            }else if(item % 8 == 7 || item % 8 == 0){
                arr['2'].push(item)
            }else{
                // 中间列
                arr['1'].push(item)
            }
        }
        return arr
    })
    // 选择座位表
    const add = (id) =>{
        // 已选则删除，否则添加
        if(data.selectList.indexOf(id) > -1){
            let index = data.selectList.indexOf(id)
            data.selectList.splice(index, 1)
        }else{
            data.selectList.push(id)
        }
        console.log(data.selectList)
    }
</script>

三、CSS所有代码

代码如下（示例）：

<style lang="scss" scoped>
    .alarm{
        padding: 2rem;
        margin: 2rem;
        border-radius: 7px;
        background: #fff;
        .passage{
            width: 100%;
            height: 100%; 
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .seat{
            width: 100%;
            height: 100px;
            border: solid 1px blue;
            cursor: pointer;
        }
        .seat.active{
            background: red;
            color: #fff;
        }
        ::v-deep(.el-col){
            margin: 0.5rem 0;
        }
    }
</style>

四、实现效果

---

总结

本文如果对你有帮助，请点个赞再走吧！！！