element ui 如何在一行放置三個輸入框和兩個按鈕

代碼示例：

<el-form :model="form" :rules="rules" label-width="80px" inline>
  <el-row>
    <el-col :span="6">
      <el-form-item label="First" word prop="first">
        <el-input v-model="form.first" placeholder="First"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="Second" word prop="second">
        <el-input v-model="form.second"
          placeholder="Second"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="Third" word prop="third">
        <el-input v-model="form.third" placeholder="Third"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="3">
      <el-button type="primary">First button</el-button>
    </el-col>
    <el-col :span="3">
      <el-button type="success">Second button</el-button>
    </el-col>
  </el-row>
</el-form>

核心是使用element ui的<el-row>配合<el-col>進行佈局；文字和input,可以分別放到不同的<el-col>標籤內。

當前也可以使用<el-form>配合<el-form-item>可以給每個輸入框前顯示文本。

 

當然也可以直接將文本放在單獨的<el-col>標籤內。如果和<input>標籤放在一個<el-col>標籤內，會變形，需要自己調整樣式。