react antdesign实现表格嵌套表单

一直使用elementui，后期使用antDesign个人感觉封装的很死没有elementui灵活，也可能是自己不熟吧。做个表格嵌套表单弄半天了。记录下这一过程。官网地址反正我是看半天了。官网地址

主要实现是在每列添加对应的表单控件使用受控组件来实现 <Input value={text} onChange={(e) => handleFieldChange(e, 'paramName', index) } 改变当前表格数据来实现数据的改变

js 复制代码

const [dataSource, setDataSource] = useState<any[]>([])
// 获取表格行数据
 const getRowByKey = (key, newData) => {
   return (newData || dataSource)[key];
 }
 // 改变表格数据
 const handleFieldChange = (e, fileName, key) => {
   const newData = [...dataSource];
   const target = getRowByKey(key, newData);
   if (target) {
     target[fileName] = e.target.value || e.target.checked;
     setDataSource(newData);
   }
 }

 // 新增
 const addData = () => {
   setDataSource([...dataSource, { 
     paramName: "",
     paramDesc: "",
     paramType: "",
     sampleItem: "",
     mandatory: true,
     requiredFlag: 1);
 };
// 删除
 const handleRemove = (index) => {
   const newData = [...dataSource];
   newData.splice(index, 1);
   setDataSource(newData);
 }
const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'key',
      align: 'center',
      width: 70,
      render: (_, __, index) => index + 1
    },
    {
      title: '参数名',
      align: 'center',
      dataIndex: 'paramName',
      minWidth: 100,
      render: (text, record, index) => {
        return <Input value={text} onChange={(e) => handleFieldChange(e, 'paramName', index) } />
      }
    },
    {
      title: '描述',
      align: 'center',
      dataIndex: 'paramDesc',
      minWidth: 100,
      render: (text, record, index) => {
        return <Input value={text} onChange={(e) => handleFieldChange(e, 'paramDesc', index) } />
      }
    },
    {
      title: '数据类型',
      align: 'center',
      dataIndex: 'paramType',
      minWidth: 100,
      render: (text, record, index) => {
        return <Input value={text} onChange={(e) => handleFieldChange(e, 'paramType', index) } />
      }
    },
    {
      title: '示例值',
      align: 'center',
      dataIndex: 'sampleItem',
      minWidth: 100,
      render: (text, record, index) => {
        return <Input value={text} onChange={(e) => handleFieldChange(e, 'sampleItem', index) } />
      }
    },
    {
      title: '校验',
      align: 'center',
      dataIndex: 'mandatory',
      minWidth: 100,
      render: (text, record, index) => {
        return <Space>
            <Checkbox checked={text} onChange={(e) => handleFieldChange(e, 'mandatory', index)} />
            <Button type="link" onClick={() => handleSetRule()}>高级规则</Button>  
        </Space>
      }
    },
    {
      title: '操作',
      align: 'center',
      minWidth: 100,
      fixed: 'right',
      render: (_, record, index) => (
        <Space>
          <Button type="link" onClick={() => addData()} >追加</Button>
          <Button type="link" danger onClick={() => handleRemove(index)}>删除</Button>
        </Space>  
      )
    }
  ]
  
<Table
    style={{ width: '100%' }}
    rowKey="key"
    columns={columns}
    dataSource={dataSource} // 从表单中获取行数据
    pagination={false} // 关闭分页（如需分页需额外处理）
  />