vue中element-ui中将多个表格放到同一行

行内表单，

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>

但是这种方式有个局限性，因为在一个大的表格中，这一行只是作为一行，最外层还会嵌套一行<el-form></el-form>，这样就会导致上面的代码里面的元素出现错误（例如无法重置参数等）。

另一种解决办法：利用<el-col></el-col>这个元素例如

<el-form-item label="type1">
            <el-col :span="3.5" style="padding-left:0px;">
              <el-select v-model="data.value1" placeholder="API接口" clearable>
                <el-option v-for="(item, index) in data.type1" :label="item" :value="item" :key="index"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1">type2</el-col>
            <el-col :span="3.5" prop="value2">
              <el-select v-model="data.value2" placeholder="免费" clearable>
                <el-option v-for="(item, index) in data.type2" :label="item" :value="item" :key="index"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1">type3</el-col>
            <el-col :span="3.5">
              <el-select v-model="data.value3" placeholder="个人免费版" clearable>
                <el-option v-for="(item, index) in data.type3" :label="item" :value="item" :key="index"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1">type4</el-col>
            <el-col :span="3.5">
              <el-select v-model="data.value4" placeholder="种类" clearable>
                <el-option v-for="(item, index) in data.type4" :label="item" :value="item" :key="index"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1">type5</el-col>
            <el-col :span="3.5">
              <el-select v-model="data.value5" placeholder="北京采集" clearable>
                <el-option v-for="(item, index) in data.type5" :label="item" :value="item" :key="index"></el-option>
              </el-select>
            </el-col>
          </el-form-item>

这样写的话就没有毛病了

刚接触vue，这是我之前踩的坑，如有不对，请留言，谢谢~