完成一个两排的，输入框与条件名分别在两排的查询条件块

需求

完成一个两排的，输入框与条件名分别在两排的查询条件块

实现方法

1. 使用table 来实现

两行tr，对应的td处录入写入条件名与输入框即可。

2. 使用栅栏el-col来实现

两行el-row，对应的el-col处录入条件名与输入框即可。

3. inline-block

条件名与输入框是两个div，各在两行，然后设置他们的父div为行内块inline-block，这样这些查询条件块就能在一行并存了。

4. 弹性布局

条件名与输入框是两个div，各在两行，然后设置他们的父div为display: flex; flex-wrap: wrap;即可。

具体实现

<div class="letf-items" style="float:left; display: flex; flex-wrap: wrap;align-items:flex-end ;height:60px;">
          <div>
            <div>班次</div>
            <el-autocomplete v-model="listQuery.firstIndex" clearable placeholder="请输入班次" style="width: 200px;" :fetch-suggestions="querySearchAsync1" />
          </div>
          <div>
            <div>IPP号</div>
            <el-autocomplete v-model="listQuery.secondIndex" clearable placeholder="请输入IPP号" style="width: 200px;" :fetch-suggestions="querySearchAsync2" />
          </div>
          <div>
            <div>冠字号</div>
            <el-input v-model="listQuery.title" clearable placeholder="请输入冠字号" style="width: 200px;" @keyup.enter.native="handleFilter" />
          </div>

          <el-button style="margin-right:10px;height:29px;" icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </div>

我们选择将条件名和输入框放在一个div中，最外层有一个大div包含所有，然后设置为弹性布局，底部对齐即可，细节还需调整一下，整体已经差不多了。display: flex; flex-wrap: wrap;align-items:flex-end。