解决form撑大表格的问题

做前端的小伙伴可能会遇到form表单撑大表格的问题,那么怎么解决这个问题呢,
解决方法:
要用到CSS,给 form 加上属性:

<form style="margin:0;padding:0">

其中 margin 是消除 form 表单下面的空位的命令。

还有另一种方法:
把放在放在的后面也可以解决这个问题。

如:

<table><tr><td>
<form action="?demo=true" method=post>
</td>
</form>
</tr>
</table>






Ant Design 中,一个表单(Form)只能有一个包含所有表单项的 Form.Item,因此无法直接嵌套多个 Form。但是,可以通过使用表单域组(Form.List)来实现套嵌表单。 具体实现步骤如下: 1. 在外层表单(父表单)中使用 Form.List 包裹需要嵌套的表单项,例如: ```jsx <Form.List name="nestedForm"> {(fields, { add, remove }) => { return ( <> {fields.map((field, index) => ( <Form.Item key={field.key}> <Input name={[field.name, 'inputName']} fieldKey={[field.fieldKey, 'inputKey']} placeholder="Input something" /> <Button onClick={() => remove(field.name)}>Remove</Button> </Form.Item> ))} <Button onClick={() => add()}>Add</Button> </> ); }} </Form.List> ``` 2. 在嵌套的表单项(子表单)中使用 Field 包裹需要收集数据的表单项,例如: ```jsx <Form.List name={['nestedForm', index, 'subNestedForm']}> {(fields, { add, remove }) => { return ( <> {fields.map((field, index) => ( <Form.Item key={field.key}> <Input name={[field.name, 'inputName']} fieldKey={[field.fieldKey, 'inputKey']} placeholder="Input something" /> <Button onClick={() => remove(field.name)}>Remove</Button> </Form.Item> ))} <Button onClick={() => add()}>Add</Button> </> ); }} </Form.List> ``` 在上述代码中,`name` 属性设置为数组形式,使用 `[]` 包裹每级表单项的名称,例如 `'nestedForm'` 表示父表单中的嵌套表单,`'subNestedForm'` 表示子表单中的嵌套表单。使用 `index` 变量表示当前表单项的下标。 通过以上方式,就可以在 Ant Design 中实现表单的嵌套和收集数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值