行跨度的 Thymeleaf 表问题（1 个订单，N 篇文章）

Question

我正在为订购系统制作一个简单的 Intranet Web 视图，以显示当前正在处理的所有订单。但是我坚持使用百里香标记：

public class Order {
  private Factory factory;

  private String orderNumber;

  private Date orderDate;

  ....

  private List<Article> articles;
}

public class Article {

  private String number;

  private String name;
}

我想要完成的是以下内容（按顺序 1 个订单 + 3 篇文章）：

<table class="table table-striped table-hover table-middle table-condensed table-bordered">
  <thead>
    <tr>
      <th>OrderNr</th>
      <th>Date</th>
      <th>Article Number</th>
      <th>ArticleName</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Order 32</td>
      <td rowspan="3">27.03.2020</td>
      <td>17442</td>
      <td>Screws</td>
    </tr>
    <tr>
      <td>023423</td>
      <td>Potatoe</td>
    </tr>
    <tr>
      <td>32342</td>
      <td>YetAnotherItem</td>
    </tr>
  </tbody>
</table>

所有常见的东西都应该跨行跨越所有文章，并且每行应该查看一篇文章。但是，我不知道如何使用两个 th:each（一个用于订单，一个用于订单的文章）来实现这一点。我可以在标记中使用大量 if 来“展平”我的视图（每条线由一个 Line-Object 表示），但在我看来，这是一个非常肮脏的黑客攻击......

谁能帮我找到更好的解决方案？

非常感谢！

Answer 1

 <table>
     <thead>
         <tr>
             <th>OrderNr</th>
             <th>Date</th>
             <th>Article Number</th>
             <th>ArticleName</th>
         </tr>
     </thead>
     <tbody>
        <div th:remove="tag" th:each="order:${orderList}" 
             th:with="articleCount=${order.articleList.size()}">
            <tr>
                <td th:text="${order.orderNumber}" th:rowspan="${order.articleList.size()}"></td>
                <td th:text="${order.orderDate}" th:rowspan="${order.articleList.size()}"></td>
                <td th:text="${articleCount>0}?${order.articles[0].number}:''"></td>
                <td th:text="${articleCount>0}?${order.articles[0].name}:''"></td>
            </tr>
            <tr th:each="article,stats:${order.articles}" th:if="${!stats.first}">
                <td th:text="${article.number}"></td>
                <td th:text="${article.name}"></td>
            </tr>
        </div>
     </tbody>
</table>

th:remove="tag"用于div在表生成后删除。

已更改以避免渲染问题。感谢@Martin C 的评论。