vue+ant design vue实现搜索区域form

1.要实现的效果：

 form部分form-item自动铺开，间距适当，屏幕大小不同能根据屏幕大小变化。 

2.vue组件中的代码示例

重点html代码：

 <!-- 搜索区域 -->
    <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>

重点css代码：

.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、注意：

1、日期类form-item不会沾满整个a-col导致页面中form-item长度不统一，设置style="width:100%"即可占满

2、如果想要适应更多屏幕，在不同屏幕上展示效果可以使用labelCol，wrapperCol：

:labelCol="{span: 8}" :wrapperCol="{span: 14}"既可以在<a-form>中使用也可以在<a-form-item>中单独使用，用于定义label和内容的占据比例。

与<a-col :md="6" :sm="24">不同的是，<a-row>将一行分为24栅格，col设置的是对应form-item占据一行的栅格数，如果不需要响应设置，可以使用：:span="6"来代替md="6" :sm="24"这些。

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