FormIO中基于输入字段值动态调整DataGrid行数的实现需求

核心逻辑 #

监听输入框的数值变化，根据输入的数字动态生成对应数量的行数据，直接传给DataGrid组件，就能实现输入几就显示几行的效果，不用额外点击按钮。

以React + Material UI DataGrid为例的代码实现 #

import { useState } from 'react';
import { DataGrid, TextField } from '@mui/material';

function SubItemForm() {
  // 存储输入的子项数量
  const [itemCount, setItemCount] = useState(0);
  // 存储DataGrid的行数据
  const [gridRows, setGridRows] = useState([]);

  // 自定义DataGrid的列配置，根据你的子项需求调整
  const gridColumns = [
    { field: 'id', headerName: '序号', width: 80 },
    { field: 'itemName', headerName: '子项名称', width: 160, editable: true },
    { field: 'itemDetail', headerName: '子项详情', width: 220, editable: true },
  ];

  // 处理输入框数值变化
  const handleCountInput = (e) => {
    const inputNum = parseInt(e.target.value, 10);
    // 过滤无效输入：非数字、负数都不处理
    if (isNaN(inputNum) || inputNum < 0) return;
    
    setItemCount(inputNum);
    // 生成对应数量的空行，用索引做唯一ID
    const newRows = Array.from({ length: inputNum }, (_, idx) => ({
      id: idx + 1,
      itemName: '',
      itemDetail: '',
    }));
    setGridRows(newRows);
  };

  return (
    <div style={{ padding: '20px' }}>
      <TextField
        label="子项数量"
        type="number"
        value={itemCount}
        onChange={handleCountInput}
        inputProps={{ min: 0, step: 1 }}
        style={{ marginBottom: '15px' }}
      />
      <DataGrid
        rows={gridRows}
        columns={gridColumns}
        editable
        disableRowSelectionOnClick
        autoHeight
      />
    </div>
  );
}

export default SubItemForm;

关键细节说明 #

• 输入校验：加了对非数字、负数的过滤，避免生成无效行；输入框设置min:0和step:1，限制只能输入正整数。
• 行唯一ID：DataGrid要求每行必须有唯一的id字段，用索引生成既简单又能保证唯一性。
• 可编辑行：开启editable属性后，用户可以直接在DataGrid里编辑子项详情，修改后的内容会自动存在gridRows数组里，提交表单时直接取这个数组就行。

如果用的是Vue、Angular等其他框架，逻辑完全一致：监听输入值，动态生成对应长度的数组作为表格数据源即可。

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