Thymeleaf中文网

深色模式

6.2 跟踪遍历状态 ​

使用 th:each 时，Thymeleaf 提供了一个实用的机制来跟踪遍历的状态——即「状态变量（status variable）」。

状态变量需在 th:each 属性中定义，它包含以下关键数据：

状态变量属性说明
index当前遍历的索引，从 0 开始计数
count当前遍历的序号，从 1 开始计数
size被遍历集合的总元素数量
current当前遍历到的元素（等价于迭代变量）
even/odd布尔值，当前是否为偶数/奇数行（索引）
first布尔值，当前是否为第一个元素
last布尔值，当前是否为最后一个元素

结合之前的产品列表示例，我们用状态变量给奇数行添加 CSS 类：

html
<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <!-- 显式定义状态变量 iterStat：格式为「迭代变量, 状态变量 : 集合」 -->
  <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  </tr>
</table>

状态变量（本示例中为 iterStat）是在 th:each 属性中定义的 —— 只需将其名称写在迭代变量之后，并用逗号分隔即可。与迭代变量一样，状态变量的作用域也仅限于持有 th:each 属性的标签所定义的代码片段范围内。

我们来看一下处理该模板后的输出结果：

html
<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <tr class="odd">
    <td>Fresh Sweet Basil</td>
    <td>4.99</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>Italian Tomato</td>
    <td>1.25</td>
    <td>no</td>
  </tr>
  <tr class="odd">
    <td>Yellow Bell Pepper</td>
    <td>2.50</td>
    <td>yes</td>
  </tr>
  <tr>
    <td>Old Cheddar</td>
    <td>18.75</td>
    <td>yes</td>
  </tr>
</table>

请注意，我们的迭代状态变量已完美生效 —— 仅为奇数行添加了 odd 这个 CSS 类。

如果你没有显式定义状态变量，Thymeleaf 会自动为你创建一个：它会在迭代变量名称后拼接 Stat 作为该状态变量的名称。

html
<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  </tr>
</table>

状态变量的高频使用场景 ​

html
<!-- 1. 显示行号（count 从 1 开始） -->
<tr th:each="prod,stat : ${prods}">
  <td th:text="${stat.count}">1</td> <!-- 行号 -->
  <td th:text="${prod.name}">Onions</td>
</tr>

<!-- 2. 给第一个/最后一个元素加特殊样式 -->
<tr th:each="prod,stat : ${prods}" 
    th:class="${stat.first}? 'first-row' : (${stat.last}? 'last-row' : '')">
  <td th:text="${prod.name}">Onions</td>
</tr>

<!-- 3. 显示总条数 -->
<div>总产品数：<span th:text="${prodStat.size}">0</span></div>

总结 ​

  1. 状态变量是 th:each 遍历的辅助工具，可获取索引、序号、奇偶行、首尾元素等遍历信息；
  2. 显式定义格式为「迭代变量, 状态变量 : 集合」，隐式生成规则是「迭代变量 + Stat」；
  3. 状态变量常用于设置奇偶行样式、显示行号、标记首尾元素等场景，是列表渲染的核心辅助手段。