关于前端:vue电影座位选座最简单的写法没有之一

废话不多说，间接上代码，因为代码比较简单，不多做解析

<template>
    <div class="sm">
        <div class="sm-title"></div>
        <div class="sm-line"></div>
        <div style="display: flex; justify-content: center">
            <div>
                <div style="display: flex" v-for="(item1, index1) in seatList" :key="index1">
                    <!-- v-if="JSON.stringify(item1) !=='{}'" -->
                    <template>
                        <div @click="seatClk(item)" class="sm-img" v-for="item in item1" :key="item.id">
                            <img
                                v-if="item.status ==='N'"class="o-w o-h"src="https://hijinka.oss-cn-shanghai.aliyuncs.com/uploads/mall1/20220307/669dde5d9fe28a377c151cadecb8dd65.png"alt=""
                            />
                            <img
                                v-if="item.status ==='Y'&& !item.isCheck"
                                class="o-w o-h"
                                src="https://hijinka.oss-cn-shanghai.aliyuncs.com/uploads/mall1/20220307/123044531581e70133020f0265bcabb2.png"
                                alt=""
                            />
                            <img
                                v-if="item.status ==='Y'&& item.isCheck"
                                class="o-w o-h"
                                src="https://hijinka.oss-cn-shanghai.aliyuncs.com/uploads/mall1/20220307/899c7f9e0365ce6d97f9d5fe89ffe878.png"
                                alt=""
                            />
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'sysIndex',
    components: {},
    data() {
        return {
            // 页面渲染的数据
            seatList: [],
            // 后端返回的数据
            arrList: [
                {
                    id: 1,
                    seatNo: '1 排 1 座',
                    status: 'N',
                    rowNo: '1',
                    colNo: '1'
                },
                {
                    id: 2,
                    seatNo: '1 排 2 座',
                    status: 'Y',
                    rowNo: '1',
                    colNo: '2'
                },
                {
                    id: 3,
                    seatNo: '1 排 3 座',
                    status: 'Y',
                    rowNo: '1',
                    colNo: '3'
                },
                {
                    id: 4,
                    seatNo: '1 排 4 座',
                    status: 'Y',
                    rowNo: '1',
                    colNo: '4'
                },
                {
                    id: 5,
                    seatNo: '1 排 5 座',
                    status: 'Y',
                    rowNo: '1',
                    colNo: '5'
                },

                {
                    id: 6,
                    seatNo: '2 排 2 座',
                    status: 'Y',
                    rowNo: '2',
                    colNo: '2'
                },
                {
                    id: 7,
                    seatNo: '2 排 3 座',
                    status: 'Y',
                    rowNo: '2',
                    colNo: '3'
                },
                {
                    id: 8,
                    seatNo: '2 排 4 座',
                    status: 'Y',
                    rowNo: '2',
                    colNo: '4'
                },

                {
                    id: 9,
                    seatNo: '3 排 4 座',
                    status: 'Y',
                    rowNo: '3',
                    colNo: '4'
                }
            ]
        };
    },
    mounted() {
        // 找到行的最大值
        const rowMax = this.findObjInArrMax(this.arrList, 'rowNo', true);
        // 找到列的最大值
        const colMax = this.findObjInArrMax(this.arrList, 'colNo', true);
        const rowNoMax = parseInt(rowMax.rowNo) + 1;
        const colNoMax = parseInt(colMax.colNo) + 1;
        // 将一维数组装成二维数组
        let list = [];
        for (var index = 0; index < rowNoMax; index++) {list[index] = [];
            for (var index1 = 0; index1 < colNoMax; index1++) {list[index][index1] = {};}
        }
        // 后端返回的数据组合到二维数组外面
        list.forEach((item1, index1) => {item1.forEach((item2, index2) => {this.arrList.forEach((item, index) => {
                    item.isCheck = false;
                    list[item.rowNo][item.colNo] = item;
                });
            });
        });
        console.log('list', list);
        this.seatList = list;
    },
    methods: {
        // 点击座位表
        seatClk(item) {
            // 如果是能够抉择，而且没有选中状态
            if (item.status === 'Y' && !item.isCheck) {item.isCheck = true;} else if (item.status === 'Y' && item.isCheck) {item.isCheck = false;}
            console.log(item);
            this.$forceUpdate();},
        // 找到数组对象中的最大值
        findObjInArrMax(list, atr, returnVal) {
            let res = Math.max.apply(
                Math,
                list.map((item) => {return item[atr];
                })
            );
            if (returnVal) {return list.filter((item) => {return item[atr] == res;
                })[0];
            } else {return res;}
        },
        // 找到数组对象中的最小值
        findObjInArrMin(list, atr, returnVal) {
            let res = Math.min.apply(
                Math,
                list.map((item) => {return item[atr];
                })
            );
            if (returnVal) {return list.filter((item) => {return item[atr] == res;
                })[0];
            } else {return res;}
        }
    }
};
</script>

<style>
.sm-img {
    width: 26px;
    height: 26px;
}
.sm {position: relative;}
.sm-line {
    width: 0;
    height: 100vh;
    border: 1px dashed #ccc;
    position: absolute;
    top: 18px;
    left: 50%;
}
.sm-title {
    background-color: #dddddd;
    width: 190px;
    height: 17px;
    -webkit-transform: perspective(17px) rotateX(-10deg);
    transform: perspective(17px) rotateX(-10deg);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
</style>