Rails视图中如何按列填充HTML表格的关联课程数据？

AI 小北

2026-8-20

Rails 按列展示Elective关联Course的表格实现方案

HTML表格是行优先的结构，你之前的写法会把所有课程横向堆叠在错误位置，要实现每列对应一个Elective、列内垂直展示其所有课程的效果，可根据场景选择以下两种方案：

方案1：表头为Elective名称，下方行对应课程（适合课程数量较多的场景）

第一步：优化控制器查询（避免N+1问题）

在对应控制器的动作中，预加载Elective的关联课程，并计算所有Elective中最多的课程数量：

@electives = Elective.includes(:courses)
max_course_count = @electives.map { |e| e.courses.size }.max || 0

第二步：视图实现表格

<table>
  <thead>
    <tr>
      <% @electives.each do |elective| %>
        <th><%= elective.name %></th>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% (0...max_course_count).each do |index| %>
      <tr>
        <% @electives.each do |elective| %>
          <td><%= elective.courses[index]&.name %></td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

遍历行索引，每一行对应所有Elective的第N个课程；课程数量少的Elective，对应单元格会自动留空（&.操作符避免nil调用方法报错）。
用includes(:courses)预加载关联数据，能大幅减少数据库查询次数，提升页面性能。

方案2：Elective名称与课程同属一个表头单元格（适合课程数量较少的场景）

如果不需要拆分多行，直接在每个表头单元格内垂直展示Elective名称和所有课程：

<table>
  <thead>
    <tr>
      <% @electives.each do |elective| %>
        <th>
          <%= elective.name %>
          <br>
          <% elective.courses.each do |course| %>
            <div style="font-weight: normal; margin-top: 4px;"><%= course.name %></div>
          <% end %>
        </th>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <!-- 若无需其他行内容，可留空或根据需求添加 -->
  </tbody>
</table>