当前位置：首页 > news >正文

react antdesign实现表格嵌套表单

news 2025/11/4 9:14:41

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

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

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>  )}]<Tablestyle={{ width: '100%' }}rowKey="key"columns={columns}dataSource={dataSource} // 从表单中获取行数据pagination={false} // 关闭分页（如需分页需额外处理）/>