前言

antd form 组件的 UI 方式适用于大多数的后台管理系统，如果对 UI 要求不是特别苛刻，完全开箱即用。

可能由于刚上手此组件库，或者对其中细节不熟悉，会使得实现表单效果有些磕磕碰碰，这里示例三种常见的业务场景，希望对新手能有所帮助。

栅格化布局

栅格布局应该是 bootstrap 开始带来的概念，对于复杂页面布局这似乎是一种万金油方式。

form 组件中的 <a-form-item> 支持栅格布局，使我们能自由的控制表单项的 label 和 输入框长度比例。

下面，是设置3列 label 和 5列 input 的例子：

通过 label-col 和 wrapper-col 可以很方便的设置长度：

不含 label 的表单项

可能某单个表单项的 label 不需要设置，这样会导致布局错乱。

下面，红框是预期展示效果（由于不含 label，会导致表单项往左偏移）：

因为 label 不存在，所以 label-col 不会生效。利用 grid 规则，在 wrapper-col 额外再设置 offset 偏移原先 label-col 的数值即可。

同行多个表单 Item

input、select 之类 antd 的表单组件默认宽度 100%，当单行内如果有多个这样的组件，最终会上下依次排列。

如果像省市区这样需求，从左至右单行排列会更加友好，但需要修改对应的宽度 width。

同样我们可以使用 grid 栅格布局 + flex 布局，让整个逻辑控制在 html 层，而非增加额外的 css 代码。

下面，红框是预期展示效果：

总结

上面这些只是简单展示我目前遇到的三种场景，对于熟悉 form 组件的同学来说，这些完全基于该组件提供的 props 实现的效果。不过希望能对刚用 antd 的新手有个帮助。

本文使用 mdnice 排版