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>标签内，会变形，需要自己调整样式。