### 实现方案 为了实现 `el-form` 中一行两个输入框，且分别左对齐和右对齐的效果，可以通过自定义 CSS 和 `flexbox` 布局来完成。以下是具体的实现方式： #### HTML 结构 通过使用 `el-row` 和 `el-col` 组件划分网格布局，并设置对应的样式。 ```html <el-form :model="form" label-width="150px"> <el-row :gutter="20" style="display: flex; align-items: center;"> <!-- 左侧输入框 --> <el-col :span="10" style="text-align: left;"> <el-form-item label="左侧输入框：" prop="leftInput"> <el-input v-model="form.leftInput"></el-input> </el-form-item> </el-col> <!-- 右侧输入框 --> <el-col :span="10" :offset="4" style="text-align: right;"> <el-form-item label="右侧输入框：" prop="rightInput"> <el-input v-model="form.rightInput"></el-input> </el-form-item> </el-col> </el-row> </el-form> ``` #### 自定义样式 在上述代码中，我们利用了 `flexbox` 的特性以及 `el-col` 的偏移功能 (`offset`) 来调整两列之间的间距。具体说明如下： - 设置 `el-row` 的 `display: flex` 属性以启用弹性盒子模型[^1]。 - 使用 `align-items: center` 确保子项垂直居中排列。 - 对于左侧输入框，保持其默认的文本对齐方向（即左对齐），而对于右侧输入框，则显式指定 `text-align: right`[^2]。 #### 数据绑定 确保 Vue.js 的数据对象已正确定义并初始化： ```javascript export default { data() { return { form: { leftInput: '', rightInput: '' } }; } }; ``` --- ### 完整效果展示 最终页面呈现为：同一行中的两个输入框分属两侧，一个靠左显示标签及输入区域，另一个则完全向右对齐[^3]。 ```html <template> <div> <el-form :model="form" label-width="150px"> <el-row :gutter="20" style="display: flex; align-items: center;"> <el-col :span="10" style="text-align: left;"> <el-form-item label="左侧输入框：" prop="leftInput"> <el-input v-model="form.leftInput"></el-input> </el-form-item> </el-col> <el-col :span="10" :offset="4" style="text-align: right;"> <el-form-item label="右侧输入框：" prop="rightInput"> <el-input v-model="form.rightInput"></el-input> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script> export default { data() { return { form: { leftInput: '', rightInput: '' } }; } }; </script> ``` --- ### 注意事项 - 如果需要动态改变布局宽度或者适配不同屏幕尺寸，可以引入媒体查询或响应式设计原则[^1]。 - 当前解决方案依赖 Element UI 提供的基础组件及其扩展能力，因此需确保项目环境支持该框架版本。