### Vue 中使用 Element UI 的 el-form 实现一行显示多个组件的布局 #### 1. **el-form 结合 Grid 布局** 为了在同一行展示多个表单项，可以结合 `el-row` 和 `el-col` 组件来实现网格化布局。通过设置 `el-col` 的 `span` 属性分配列宽比例，从而达到灵活控制每一行中各组件排列的效果[^1]。 示例代码如下： ```html <el-form :model="form" label-width="120px"> <el-row :gutter="20"> <!-- 第一列 --> <el-col :span="8"> <el-form-item label="输入框1：" prop="field1"> <el-input v-model="form.field1" style="width: 100%;"></el-input> </el-form-item> </el-col> <!-- 第二列 --> <el-col :span="8"> <el-form-item label="输入框2：" prop="field2"> <el-input v-model="form.field2" style="width: 100%;"></el-input> </el-form-item> </el-col> <!-- 第三列 --> <el-col :span="8"> <el-form-item label="输入框3：" prop="field3"> <el-input v-model="form.field3" style="width: 100%;"></el-input> </el-form-item> </el-col> </el-row> <!-- 单独占一行的情况 --> <el-row> <el-col :span="24"> <el-form-item label="单独占用整行：" prop="singleField"> <el-input v-model="form.singleField" style="width: 100%;"></el-input> </el-form-item> </el-col> </el-row> </el-form> <script> export default { data() { return { form: { field1: '', field2: '', field3: '', singleField: '' } }; } }; </script> ``` #### 2. **解决垂直分布问题** 如果发现即使设置了 `el-row` 和 `el-col`，仍然呈现垂直分布，则可能是由于未正确配置样式或者遗漏了一些必要的属性。例如，需确保给 `el-input` 添加固定宽度或百分比宽度以适应容器大小；另外还需注意是否启用了某些默认样式干扰了布局效果[^2]。 一种常见做法是在每个 `el-input` 上显式指定宽度，如上面例子中的 `style="width: 100%;"`，这样可以让输入框完全填充所在列的空间。 #### 3. **动态调整栅格间距** 通过 `:gutter` 动态设定行列之间的间隔距离，能够进一步优化视觉体验。比如当屏幕尺寸较小时减少间隙值，反之增大间隙值提升美观度。 示例代码片段： ```html <el-row :gutter="isSmallScreen ? 10 : 20"> ... </el-row> <script> export default { computed: { isSmallScreen() { return window.innerWidth < 768; } } }; </script> ``` --- ###