当前位置：首页 > VUE

vue实现选座位

2026-02-11 09:35:09VUE

Vue 实现选座位功能

数据准备

创建一个座位数组，每个座位对象包含唯一标识符、行列位置和选中状态。示例数据结构如下：

data() {
  return {
    seats: [
      { id: 1, row: 1, col: 1, selected: false, booked: false },
      { id: 2, row: 1, col: 2, selected: false, booked: true },
      // 更多座位...
    ]
  }
}

渲染座位布局

使用 v-for 循环渲染座位，通过 CSS 类动态控制样式。关键代码示例：

<div class="seat-map">
  <div 
    v-for="seat in seats" 
    :key="seat.id"
    :class="['seat', 
             { 'selected': seat.selected, 
               'booked': seat.booked }]"
    @click="toggleSeat(seat)"
  >
    {{ seat.row }}-{{ seat.col }}
  </div>
</div>

处理点击事件

实现座位选择/取消选择逻辑，注意已预订座位不可选：

methods: {
  toggleSeat(seat) {
    if (!seat.booked) {
      seat.selected = !seat.selected
      this.$emit('seat-selected', seat)
    }
  }
}

样式设计

基础样式示例（SCSS）：

.seat-map {
  display: grid;
  grid-template-columns: repeat(8, 40px);
  gap: 10px;
}

.seat {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &.selected {
    background-color: #42b983;
    color: white;
  }

  &.booked {
    background-color: #ff4444;
    cursor: not-allowed;
  }
}

高级功能扩展

添加屏幕区域标识
实现连选功能（按住Shift多选）
添加座位类型区分（VIP/普通）
与后端API集成保存选择状态
使用SVG实现更复杂的座位图形

完整组件示例

<template>
  <div>
    <h3>屏幕</h3>
    <div class="screen"></div>
    <div class="seat-map">
      <div 
        v-for="seat in seats" 
        :key="seat.id"
        :class="['seat', 
                { 'selected': seat.selected, 
                  'booked': seat.booked }]"
        @click="toggleSeat(seat)"
      >
        {{ seat.row }}-{{ seat.col }}
      </div>
    </div>
    <div>已选座位: {{ selectedSeats }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seats: this.generateSeats(5, 8)
    }
  },
  computed: {
    selectedSeats() {
      return this.seats.filter(s => s.selected).map(s => `${s.row}排${s.col}座`)
    }
  },
  methods: {
    generateSeats(rows, cols) {
      // 生成座位数据的实现
    },
    toggleSeat(seat) {
      // 选择逻辑实现
    }
  }
}
</script>

vue实现选座位