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，這是我之前踩的坑，如有不對，請留言，謝謝~