FormIO表格元素数据求和异常及指定字段求和方案咨询

问题分析：求和结果异常（如1+1=32） #

你的脚本出现异常的核心原因是数值被当作字符串处理，导致字符串拼接而非数值相加。FormIO中输入的数字可能以字符串形式存储，直接相加会触发字符串拼接逻辑，最终得到非预期结果。

修正后的通用求和脚本 #

将每个值转换为数值类型后再累加即可解决问题：

value = Object.keys(data).reduce((acc, key) => {
  if (key === "totalTableData") return acc;
  // 将值转换为数值，空值或非数值默认为0
  const numValue = Number(data[key]) || 0;
  return acc + numValue;
}, 0);

对指定字段求和的实现 #

如果你只想对表格中的特定输入字段求和（比如column1row1、column2row1、column1row2、column2row2），可以先定义目标字段列表，再筛选累加：

// 定义需要求和的字段key列表
const targetKeys = ["column1row1", "column2row1", "column1row2", "column2row2"];

value = targetKeys.reduce((acc, key) => {
  const numValue = Number(data[key]) || 0;
  return acc + numValue;
}, 0);

你的表格JSON配置 #

{
    "label": "Table",
    "cellAlignment": "left",
    "key": "table",
    "type": "table",
    "numRows": 4,
    "input": false,
    "tableView": false,
    "rows": [
      [
        {
          "components": []
        },
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Column 1",
              "refreshOnChange": false,
              "key": "html111",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Column 2",
              "refreshOnChange": false,
              "key": "html121",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Column total",
              "refreshOnChange": false,
              "key": "html124",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        }
      ],
      [
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Row 1",
              "refreshOnChange": false,
              "key": "html125",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column1row1",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column2row1",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalRow1",
              "type": "number",
              "input": true
            }
          ]
        }
      ],
      [
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Row 2",
              "refreshOnChange": false,
              "key": "html126",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column1row2",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column2row2",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalRow2",
              "type": "number",
              "input": true
            }
          ]
        }
      ],
      [
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Row total",
              "refreshOnChange": false,
              "key": "html127",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalColumn1",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalColumn2",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalTableData",
              "type": "number",
              "decimalLimit": 0,
              "input": true
            }
          ]
        }
      ]
    ],
    "numCols": 4
  }

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