主要是labelCol和wrapperCol的使用

<a-form-model ref="infoForm"
                      :model="formData"
                      :rules="formRules"
                      :label-col="labelCol"
                      :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :xs="24"
                   :sm="24"
                   :xl="8"
                   :xxl="6">
              <a-form-model-item label="风险类型"
                                 prop="typeName">
                <a-select v-model="formData.typeName" :disabled="formData.disabled">
                  <a-select-option v-for="(val, key, index) in typeMap"
                                   :key="val"
                                   :value="key">{{key}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24"
                   :sm="24"
                   :xl="8"
                   :xxl="6">
              <a-form-model-item label="风险等级"
                                 prop="level">
                <a-select v-model="formData.level" :disabled="formData.disabled">
                  <a-select-option :value="'0'">低</a-select-option>
                  <a-select-option :value="'1'">中</a-select-option>
                  <a-select-option :value="'2'">高</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24"
                   :sm="24"
                   :xl="8"
                   :xxl="6">
              <a-form-model-item label="供应商名称"
                                 prop="supplierName">
                <a-select v-model="formData.supplierName"
                          show-search>
                  <a-select-option v-for="(val, key, index) in supplierMap"
                                   :key="key"
                                   :value="key"
                                   :disabled="formData.disabled">{{ key }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24"
                   :sm="24"
                   :xl="8"
                   :xxl="6">
              <a-form-model-item label="邮件通知人"
                                 prop="mailNotifiers">
                <a-select v-model="formData.mailNotifiers"
                          mode="multiple"
                          :disabled="formData.disabled">
                  <a-select-option :value="'supplier'">供应商</a-select-option>
                  <a-select-option :value="'category'">品类</a-select-option>
                  <a-select-option :value="'category_leader'">品类领导</a-select-option>
                  <a-select-option :value="'jt_jgw'">价格委员会</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-form-model-item label="风险描述"
                               prop="description"
                               :label-col="{xs:{span: 10},
                               sm:{ span: 10, },
                               xl: { span: 3 },
                               xxl: { span: 2 }, }"
                               :wrapper-col="{xs: { span: 14 },
       sm: { span: 14, },
       xl: { span: 21 },
        xxl: { span: 22 },
         }">
              <a-textarea v-model="formData.description" :disabled="formData.disabled" />
            </a-form-model-item>

          </a-row>
        </a-form-model>

效果图

 

 

 

Logo

前往低代码交流专区

更多推荐