Element UI CURD 页面搜索区表单统一布局

CURD 页面都是一个样子，上面搜索条件（表单），中间数据（表格），下面分页。

搜索表单组件类型多，input、datepicker 之类的。这些组件长度不一，并且 form 的 inline 属性也只是让表单水平布局，没有均匀分割。为了让表单能够均匀分割一行的空间，可以用 row 和 col 进行布局。

<el-form
  ref="form"
  inline
  :model="form"
  label-width="80px"
>
  <el-row>
    <el-col span="6">
      <el-form-item label="用户姓名">
        <el-input
          v-model="form.name"
          maxlength="100"
        />
      </el-form-item>
    </el-col>
    <el-col span="6">
      <el-form-item label="手机号">
        <el-input
          v-model="form.phone"
          type="number"
          maxlength="11"
        />
      </el-form-item>
    </el-col>
    <el-col span="6">
      <el-form-item label="身份证号">
        <el-input
          v-model="form.idNumber"
          maxlength="100"
        />
      </el-form-item>
    </el-col>
    <el-col span="6">
      <el-form-item label="用户ID">
        <el-input
          v-model="form.id"
          maxlength="100"
        />
      </el-form-item>
    </el-col>
    <el-col span="6">
      <el-form-item label="检测日期">
        <el-date-picker
          v-model="form.date"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
        />
      </el-form-item>
    </el-col>
    <el-col span="6">
      <el-form-item label="设备号">
        <el-input
          v-model="form.deviceNo"
          maxlength="100"
        />
      </el-form-item>
    </el-col>
    <el-col span="6">
      <el-form-item>
        <el-button @click="handleClear">重置</el-button>
        <linear-blue-button
          :loading="loading"
          @click="handleSearch"
        >查询</linear-blue-button>
      </el-form-item>
    </el-col>

  </el-row>
</el-form>

效果如图：

勉强可用，但还是有问题。input 和 picker 长度不一的问题还在，并且如果页面宽度不够，输入框会掉下去。我希望的是 input 沾满所在空间。比较小的改动方法是直接改全局样式，这比自己二次封装整个搜索区要快。

// search grid
.el-col {
  .el-form-item {
    display: flex;
  }
  .el-form-item__content {
    flex: 1;
  }
}

效果如图：

用了 flex 之后，即使页面宽度不够也不会出现 input 掉下去的问题。