可根据antd内置API 设置 layout属性,我这里UI图展示表单标题和输入框各单独一行,所以才用的是‘vertical’属性,和‘inline’属性区别就是标题与输入框是否单独一行,再根据antd中的栅格布局,将表单各项用row,rol包裹住即可完成需求,若考虑响应式布局,可根据xs,sm等属性设置
<a-form
:label-col="{ span: 8 }"
:wrapper-col="{ span: 20 }"
layout="vertical">
<a-row>
<a-col :span="12">
<a-form-item
label="统一社会信用代码"
v-bind="validateInfos.certificatesCode">
<a-input
v-model:value="cerificatesData.certificatesCode"
:disabled="canChange" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="统一社会信用代码"
v-bind="validateInfos.certificatesCode">
<a-input
v-model:value="cerificatesData.certificatesCode"
:disabled="canChange" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
label="统一社会信用代码"
v-bind="validateInfos.certificatesCode">
<a-input
v-model:value="cerificatesData.certificatesCode"
:disabled="canChange" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>