前端实现一个排座的vue代码
时间: 2024-05-28 17:04:17 浏览: 14
很高兴为您提供帮助!以下是一个简单的排座vue代码:
<template>
<div>
<h2>座位表</h2>
<table>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<td v-for="(seat, seatIndex) in row" :key="seatIndex">
<button :disabled="seat.taken" @click="selectSeat(rowIndex, seatIndex)">
{{rowIndex + 1}}排{{seatIndex + 1}}座
</button>
</td>
</tr>
</tbody>
</table>
<div v-if="selectedSeat !== null">
<h3>已选座位</h3>
<p>第{{selectedSeat.row + 1}}排,{{selectedSeat.seat + 1}}座</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: [
[{taken: false}, {taken: false}, {taken: true}, {taken: false}],
[{taken: false}, {taken: false}, {taken: false}, {taken: false}],
[{taken: true}, {taken: false}, {taken: false}, {taken: true}],
[{taken: false}, {taken: true}, {taken: false}, {taken: false}],
],
selectedSeat: null,
};
},
methods: {
selectSeat(row, seat) {
if (!this.rows[row][seat].taken) {
this.rows[row][seat].taken = true;
this.selectedSeat = {row, seat};
}
},
},
};
</script>
请注意,这只是一个简单的示例代码,您可以根据您的需求进行修改和扩展。希望这可以帮助到您!