标签：vue 布局 antd col select row

在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>

标签：vue,布局,antd,col,select,row
来源： https://blog.csdn.net/oprim/article/details/119420953

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。