The front end realizes the classroom desk layout, which can be selected by clicking
提示：本文是vue + ts实现，主要代码为html+css，适用其他技术栈，根据自己代码修改即可
1. All HTML codes
The code is as follows (example):
<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>
2. All TS codes
The code is as follows (example):
<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>
3. All CSS codes
The code is as follows (example):
<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>
4. Realize the effect
