Thymeleaf动态矩阵渲染问题：数组内容重复填充至输入框

问题根源 #

核心问题是Thymeleaf中使用th:field="*{matrixData}"绑定数组时未指定具体索引，导致Thymeleaf将整个数组的toString结果填充到每个输入框，同时表单字段name属性未带索引，无法正确映射到数组对应元素。另外，代码用<tr>作为循环容器但外层是<div class="columns">，属于HTML结构错误，可能引发渲染异常。

修复方案 #

1. 修改HTML模板 #

调整th:field为指定数组索引的形式，同时修正循环容器标签：

<form th:object="${projectData}" method="post" class="card">
    <div class="card-content">
        <div class="content">
            <div class="columns is-gapless is-multiline is-mobile">
                <div th:each="_, index: ${projectData.matrixData}" class="column">
                    <div th:if="${index.index % matrixSize == 0}" class="break column is-desktop"></div>

                    <!-- 禁用输入框改用readonly确保值能提交，若必须用disabled需添加对应隐藏域 -->
                    <input th:field="*{matrixData[__${index.index}__]}"
                           class="column"
                           type="text"
                           th:if="${#arrays.contains(matrixDisabledFields, index.index)}"
                           th:id="${index.index}"
                           readonly>

                    <input th:field="*{matrixData[__${index.index}__]}"
                           class="column"
                           type="text"
                           th:unless="${#arrays.contains(matrixDisabledFields, index.index)}"
                           th:id="${index.index}">
                </div>
            </div>
            <input type="submit" class="button is-light is-pulled-right" value="Save">
        </div>
    </div>
</form>

• 关键修改：th:field="*{matrixData[__${index.index}__]}"通过动态索引让每个输入框绑定数组对应位置。
• 替换<tr>为<div>，避免HTML无效嵌套。
• 若坚持使用disabled，需添加隐藏域传递值：

  <input th:field="*{matrixData[__${index.index}__]}" type="hidden">
  <input th:field="*{matrixData[__${index.index}__]}"
         class="column"
         type="text"
         th:if="${#arrays.contains(matrixDisabledFields, index.index)}"
         th:id="${index.index}"
         disabled>
  

2. 优化Controller代码 #

原代码中获取projectData后重新new对象覆盖，导致原项目数据丢失，需移除以下两行：

// projectData = new ProjectData();
// projectData.setMatrixData(matrix);

改为直接修改原对象的matrixData：

projectData.setMatrixData(matrix);

效果说明 #

修改后每个输入框将正确显示对应索引的数组值，禁用/只读框显示"X"，其他框显示对应内容，提交表单时后端可正确接收数组元素值，匹配预期效果。

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