Vue+ant design vue realizes the search area form

1. The effect to be achieved:

 The form part of the form-item is automatically spread out, the spacing is appropriate, and the screen size can be changed according to the screen size. 

2. Code example in vue component

Key html code:

 <!-- 搜索区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :labelCol="{span: 8}" :wrapperCol="{span: 14}" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item :label="this.$t('m.sdata') + this.$t('m.YDate')">
              <a-range-picker style="width: 100%;" :format="dateFormat" :allowClear="false" @change="onChange"
                :placeholder="[$t('m.ystartTime'),$t('m.yendTime')]" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item :label="this.$t('m.user') + this.$t('m.name')">
              <a-input :placeholder="this.$t('m.PleaseEnter') + this.$t('m.user') + this.$t('m.name')"
                v-model="userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24" :xs="24">
            <a-button style="marginRight:8px" type="primary" @click="getList()">{
   
   { $t('m.Query') }}</a-button>
            <a-button type="primary" @click="handleExport">{
   
   { $t('m.export') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

Key css code:

.table-page-search-wrapper {
  .ant-form-inline {
    .ant-form-item {
      display: flex;
      margin-bottom: 24px;
      margin-right: 0;

      .ant-form-item-control-wrapper {
        flex: 1 1;
        display: inline-block;
        vertical-align: middle;
      }

      > .ant-form-item-label {
        line-height: 32px;
        padding-right: 8px;
        width: auto;
      }
      .ant-form-item-control {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}

 3. Note:

1. The date form-item will not cover the entire a-col, resulting in inconsistent length of the form-item on the page. Set style="width:100%" to fill it up

2. If you want to adapt to more screens, you can use labelCol and wrapperCol to display the effect on different screens:

:labelCol="{span: 8}" :wrapperCol="{span: 14}" can be used in <a-form> or alone in <a-form-item> to define label and content proportion.

Unlike <a-col :md="6" :sm="24">, <a-row> divides a row into 24 grids, and col sets the number of grids corresponding to form-item occupying a row. If you don't need response settings, you can use: :span="6" instead of md="6" :sm="24" these.

//data中定义，<a-form>标签中使用        
formItemLayout: {
          labelCol: {
            xs: { span: 7 },
            sm: { span: 4 },
            md: { span: 8 }
          },
          wrapperCol: {
            xs: { span: 17 },
            sm: { span: 20 },
            md: { span: 16 }
          }
        },