使用Thymeleaf动态渲染表格，每行显示4个单元格

{"title":"使用Thymeleaf动态渲染表格，每行显示4个单元格","description":"本文介绍如何使用Thymeleaf的循环和条件判断，动态渲染表格，并控制每行显示4个单元格，每个单元格包含图片和文本。","keywords":"Thymeleaf, 表格, 循环, 条件判断, 动态渲染, 每行显示4个单元格, 图片, 文本","content":"<table>\n\t<tbody>\n\t\t<tr th:each="item, index : ${items}">\n\t\t\t<td>\n\t\t\t\t<div>\n\t\t\t\t\t<img th:src="${item.imageUrl}" />\n\t\t\t\t\t<div th:text="${item.text}">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</td>\n\t\t\t<th:block th:if="${index.count % 4 == 0}">\n\t\t\t</th:block>\n\t\t</tr>\n\t</tbody>\n</table>\n\n在上面的示例中，"${items}"代表后端传递给前端的对象数组。使用"th:each"循环遍历数组中的每个对象，"item"代表当前对象，"index"代表索引。在每个"td"中，使用Thymeleaf的表达式来动态设置"img"的"src"和"div"的文本内容。\n\n为了确保每个"tr"中只显示4个"td"，我们使用了"th:block"和"th:if"条件判断。当索引的计数能被4整除时，添加一个空的"th:block"。这样，每4个"td"将被放在一个新的"tr"中。\n\n请根据你的需求修改示例中的"${item.imageUrl}"和"${item.text}"以适应你的对象属性。"}