Vue3 矩阵式交互布局实战：从考场排座到电影选座的可复用组件设计

1. 为什么需要矩阵式交互布局组件

最近在做一个在线考试系统的项目时，遇到了一个很有意思的需求：需要实现一个考场座位布局编辑器。这个编辑器要能让学生座位按照矩阵排列，可以标记座位状态，还能拖拽调整座位顺序。做完之后发现，这套逻辑完全可以复用在电影选座、会议室预订等场景。

矩阵式布局的核心在于用坐标系统来管理每个元素的位置。就像下棋时每个棋子都有对应的坐标一样，我们把每个座位看作棋盘上的一个点。这种设计最大的好处是：

1. 位置关系清晰：每个座位都有明确的(x,y)坐标
2. 状态管理方便：可以通过坐标快速查找和修改座位状态
3. 布局灵活：可以轻松切换横向或纵向排列方式

我在实现过程中发现，很多开发者遇到类似需求时都会重复造轮子。其实只要抽象出核心逻辑，完全可以做成一个通用的Vue3组件。下面我就分享下这个组件的设计思路和实现细节。

2. 核心数据结构设计

2.1 座位模型定义

首先需要定义座位的数据结构。这里我用TypeScript定义了一个接口：

typescript复制interface SeatModel {
  x: number; // 横坐标
  y: number; // 纵坐标
  seatNo: number; // 座位编号
  seatId: string | number; // 后端生成的唯一ID
  status?: number; // 座位状态(可选)
}

这个模型包含了座位的基本信息：

• x,y确定座位在矩阵中的位置
• seatNo是用户可见的编号
• seatId用于和后端数据关联
• status可以扩展各种状态(如可用/禁用等)

2.2 矩阵生成算法

生成矩阵的核心是双层循环。比如要生成8×8的矩阵：

typescript复制const generateMatrix = (rows: number, cols: number) => {
  const seats: SeatModel[] = [];
  let seatNo = 1;
  
  for (let x = 0; x < rows; x++) {
    for (let y = 0; y < cols; y++) {
      seats.pus