Rails 7 + Hotwire Turbo实现表格动态追加数据行的技术问询

直接按以下步骤落地：

1. 调整索引页（index.html.erb） #

给表格的<tbody>加唯一ID，方便Turbo Stream定位；同时把新建表单放在turbo_frame_tag里，确保提交时不刷新整个页面：

<!-- 表格部分 -->
<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>地址</th>
      <th>操作</th>
    </tr>
  </thead>
  <!-- 给tbody加id，用于Turbo Stream定位 -->
  <tbody id="companies-tbody">
    <%= render @companies %>
  </tbody>
</table>

<!-- 新建表单放在Turbo Frame里 -->
<%= turbo_frame_tag "new-company-form" do %>
  <%= form_with(model: Company.new) do |form| %>
    <%= form.label :name %>
    <%= form.text_field :name %>

    <%= form.label :address %>
    <%= form.text_field :address %>

    <%= form.submit "创建公司" %>
  <% end %>
<% end %>

2. 优化局部视图（_company.html.erb） #

让这个局部视图只渲染表格的一行<tr>，确保创建新记录后可以直接复用生成新行：

<tr id="company-<%= company.id %>">
  <td><%= company.name %></td>
  <td><%= company.address %></td>
  <td>
    <%= link_to "编辑", edit_company_path(company), data: { turbo_frame: "edit-company-form" } %>
  </td>
</tr>

3. 配置Turbo Stream响应（create.turbo_stream.erb） #

用Turbo的append动作把新创建的公司行追加到表格tbody，同时重置表单提升体验：

<!-- 追加新记录行到表格 -->
<%= turbo_stream.append "companies-tbody" do %>
  <%= render @company %>
<% end %>

<!-- 重置新建表单（可选，提交后清空输入框） -->
<%= turbo_stream.replace "new-company-form" do %>
  <%= form_with(model: Company.new) do |form| %>
    <%= form.label :name %>
    <%= form.text_field :name %>

    <%= form.label :address %>
    <%= form.text_field :address %>

    <%= form.submit "创建公司" %>
  <% end %>
<% end %>

4. 控制器适配响应逻辑 #

在CompaniesController的create动作里，确保保存成功后返回turbo stream格式：

def create
  @company = Company.new(company_params)

  respond_to do |format|
    if @company.save
      format.turbo_stream # 自动渲染create.turbo_stream.erb
      format.html { redirect_to companies_url, notice: "公司创建成功" }
    else
      format.turbo_stream { render turbo_stream: turbo_stream.replace("new-company-form", partial: "companies/form", locals: { company: @company }) }
      format.html { render :new, status: :unprocessable_entity }
    end
  end
end

private
def company_params
  params.require(:company).permit(:name, :address) # 按你的模型字段调整
end

提交表单后，Turbo会自动处理请求，把新表格行追加到页面上，全程无需刷新整个索引页。

内容的提问来源于stack exchange，提问作者Volkan