vue antd row col布局中存在select页面未对齐

最新推荐文章于 2025-06-23 14:52:18 发布

原创最新推荐文章于 2025-06-23 14:52:18 发布 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

javascript 专栏收录该内容

9 篇文章

订阅专栏

当使用Vue Antd的row和col进行页面布局时，如果包含select组件，可能会出现因布局导致的空白间隔。解决这个问题的方法是在row组件上设置属性type为'flex'。

在vue antd使用row、col布局时，若存在select下拉选择框，页面布局中存在空白间隔列。

需要在row中添加布局类型：type="flex"

<template>
  <div>
    <a-modal :title="title"
             :visible="visible"
             cancelText="关闭"
             okText="确定"
             width="800px"
             @ok="onOk"
             @cancel="onCancel">
      <a-form layout="horizontal" :form="form">
        <div>
          <a-row :gutter="24" type="flex">
            <a-col :span="12" v-for="item in addPageFieldList" :key="item.fieldId" :value="item.value">
              <a-form-item
                  :label="item.fieldName"
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 18, offset: 1}"
              >
<!--                无关联关系并且不是文件上传，则为input-->
                <a-input v-if="(item.cdFieldRelation == null && item.isFileupload != '0' )"
                         :placeholder="'请输入'+item.fieldName" v-decorator="item.vDecorator"/>
<!--                有关联关系，下来选择-->
                <a-select v-else-if="item.cdFieldRelation"
                          placeholder="请选择"
                          style="display: block;" v-decorator="item.vDecorator"
                          :mode="(item.cdFieldRelation.relationMode == 0)?'default':'multiple'"
                >
                  <a-select-option
                      v-for="dicValue in item.dicListData"
                      :value="dicValue.dicCode"
                      :key="dicValue.dicId"
                  >
                    {{ dicValue.dicName}}
                  </a-select-option>
                </a-select>
<!--                文件上传-->
                <a-upload :name="item.fieldCode" v-if="(item.isFileupload == '0')"
                          action="/api/crud/cdFile/uploadFile"
                          :data="{name:item.fieldCode}"
                          :default-file-list="item.fileList"
                          @change="fileUploadChange($event,item.fieldCode)"
                          :remove="handleFileRemove"
                  >
                  <Button>
                    <a-icon type="upload"/>上传
                  </Button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>