vue el-form一行里面放置多个el-form-item的实现

Vue 的 Element-UI 库提供了许多常见的组件，例如表单组件 el-form 和其子组件 el-form-item。el-form-item是用于定义表单项的组件，一个 el-form 中可以包含多个 el-form-item。但是默认情况下，每个 el-form-item 占据了一整行，如果希望在同一行里面放置多个 el-form-item，则需要进行特殊的处理。

以下是一些实现多个 el-form-item 在同一行中展示的具体方法：

1. 使用 inline 属性

在 el-form 上添加 inline 属性即可将 el-form-item 放置在同一行，这个属性会根据 el-form-item 的宽度自动进行排列。inline 属性会改变 el-form-item 的默认排列方式，使其在同一行中展示，例如：

<template>
  <el-form inline>
    <el-form-item label="用户名">
      <el-input v-model="username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="email"></el-input>
    </el-form-item>
  </el-form>
</template>

1. 使用 el-row 和 el-col

我们可以使用 el-row 和 el-col 组件进行布局，将多个 el-form-item 放置到 el-col 中，然后使用 el-row 进行排列。el-row 和 el-col 的宽度可以通过 span 属性进行控制。例如，我们希望在同一行中放置两个 el-form-item，可以进行如下设置：

<template>
  <el-form>
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户名">
          <el-input v-model="username"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱">
          <el-input v-model="email"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

以上是实现多个 el-form-item 在同一行中的两种方法，使用 inline 属性可以方便快捷地完成简单的布局，使用 el-row 和 el-col 可以灵活地进行复杂的布局。