Ant Design of Vue中a-form-model多行表单对齐和验证

Posted 2022-03-19 尔嵘

表单是前端人员不得不面对的一个组件，如何画的对齐好看，验证成功呢？

1.代码：

（1）布局: html+css，当然肯定使用ant的组件

注意：单位我们放在suffix里面，如suffix="㎡"；尽量不要给表单设置固定死的宽度，比如a-input、a-select,当我们设置的labelCol、wrapperCol足够大的时候，表单会自动填充区域；labelAlign="right"是设置label全部右对齐

<a-card :bordered="false" :body-style=" padding: \'0px\' ">
    <a-form-model
        :model="dataForm"
        ref="dataForm"
        @submit.native.prevent
        @keyup.enter.native="querySearch()"
        style="height: 1000px"
        labelAlign="right"
        :labelCol=" span: 6 "
        :wrapperCol=" span: 18 "
        :rules="rules1"
      >
        <a-row>
          <a-col :xs="24" :sm="24" :md="24&#