form 查询 form布局 ant 自适应布局

本文采用的都是ant design vue

场景:

在后台管理系统中,想实现一个这样的布局

 

方法一

使用a-row布局,这是ant中的栅格布局,使用gutter将一行分为24份,在使用md sm等规定具体每个a-form-item占的份数,实现一行布局

 

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline"
              @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6"
                 :sm="24">
            <a-form-item :label="$t('m.spacename')">
              <a-input :placeholder="$t('m.spanceInput')"
                       style="width:80%"
                       v-model="queryParam.reasonKey"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6"
                 :sm="24">
            <a-form-item :label="$t('m.alertType')">
              <a-select showSearch
                        optionFilterProp="title"
                        style="width:80%;"
                        :placeholder="$t('m.alertType')"
                        v-model="queryParam.type">
                <a-select-option v-for="info in warnTypeList"
                                 :key="info.type"
                                 :title="info.name">
                  {{ info.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6"
                 :sm="24">
            <a-form-item :label="$t('m.time')">
              <a-locale-provider :locale="locale">
                <a-range-picker style="margin-bottom:10px"
                                :format="dateFormat"
                                v-model="searchTime" /><br>
              </a-locale-provider>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;"
                class="table-page-search-submitButtons">
            <a-col :md="6"
                   :sm="24">
              <a-button type="primary"
                        @click="searchQuery">{{ $t('m.Query') }}</a-button>
              <a-button style="margin-left: 8px"
                        @click="searchReset">{{ $t('m.reset') }}</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

效果图:

画面很大时显得分散:

 

 画面很小时根据sm等属性切换布局:

 

 

方法二:

使用form 的inline属性,参考代码:

    <a-form layout="inline">
      <a-form-item :label="$t('m.spacename')">
        <a-input v-model="locationName" :placeholder="$t('m.spanceInput')"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Query')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>{{$t('m.Reset')}}</a-button>
      </a-form-item>
    </a-form>

效果图:

画面大时不分散

 画面小时自动换行

 

区别:

第一种再放大时,布局会呈现按比例布局,不会自动换行,画面太小显得太分散,画面太大显得太挤。要想自动换行,或者在不同画面大小下展示不同的布局,需要通过md sm等属性分别设置。

第二种写法简单,专门适用form,会自动换行,更推荐!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

几个高兴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值