废话不多说，间接上代码，因为代码比较简单，不多做解析
<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>