<think>我们参考了多个站内引用，特别是引用[3]和引用[4]中关于自定义label的内容，以及引用[5]中关于布局的内容。 在Element Plus（Vue 3版本）中，el-form-item组件的label位置可以通过el-form的label-position属性控制，也可以单独设置label-width等属性。但用户要求的是label在上方，输入框在下方，这种布局可以通过设置label-position="top"来实现。 根据引用[3]中的例子，在el-form上设置label-position="top"可以使所有表单项的label位于输入框上方。 同时，我们也可以参考引用[4]和引用[5]中的一些布局技巧。 因此，我们可以这样实现： 1. 在el-form上设置label-position="top"，这样所有的el-form-item的label都会在输入框上方。 2. 如果只需要单独某个el-form-item设置，目前Element Plus没有提供单独的属性，但我们可以通过自定义样式来实现。 不过，通常我们会在整个表单上统一设置。如果确实需要单独设置，可以使用CSS覆盖。 下面给出两种方法： 方法一：全局设置（整个表单） 在el-form组件上设置label-position="top"，这样所有的表单项都会变成label在上方。 方法二：单独设置（某个表单项） 由于Element Plus没有提供单独的属性，我们可以使用CSS来覆盖默认样式。将el-form-item的布局改为flex布局，并设置方向为column（垂直排列）。 但是注意，引用[5]中使用了el-row和el-col来布局，这种方法也可以用于调整位置，但可能不是最直接的。 我们更推荐方法一，因为简单且统一。如果必须单独设置，则使用方法二。 下面给出代码示例： 方法一：整个表单设置 ```vue <template> <el-form label-position="top"> <el-form-item label="用户名"> <el-input v-model="username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="password" type="password"></el-input> </el-form-item> </el-form> </template> ``` 方法二：单独设置（使用CSS） 我们可以给el-form-item添加一个自定义类名，然后通过CSS改变布局。 ```vue <template> <el-form> <!-- 其他表单项 --> <el-form-item label="用户名" class="label-top"> <el-input v-model="username"></el-input> </el-form-item> <!-- 其他表单项 --> </el-form> </template> <style scoped> /* 注意：如果样式不生效，可能需要使用深度选择器 */ :deep(.label-top) { display: flex; flex-direction: column; } /* 调整label的位置，使其在上方 */ :deep(.label-top .el-form-item__label) { float: none; display: block; text-align: left; padding: 0 0 10px 0; /* 调整label和输入框的间距 */ } </style> ``` 注意：在Vue 3的单文件组件中，使用scoped样式时，修改子组件的样式需要使用深度选择器（:deep）。 另外，引用[3]中提到了在el-form上设置label-position="top"，这也是官方推荐的方式。 因此，如果整个表单都需要label在上，推荐使用方法一。如果只有个别表单项需要，可以使用方法二（自定义CSS）。 根据用户需求，他可能更倾向于整个表单设置，所以方法一更简单直接。 引用[3]和引用[4]中展示了自定义label内容的方法，但这里我们不需要自定义内容，只需要调整位置。 所以，我们给出以上两种方案。 最后，我们生成相关问题。 </think> 在 Vue 3 中使用 Element Plus 的 `el-form-item` 组件实现 label 在上方、输入框在下方展示的方法主要有两种方式，以下是根据引用资料整理的解决方案： ### 方法一：设置全局表单属性（推荐） 在 `el-form` 组件上设置 `label-position="top"` 属性，使所有表单项的 label 显示在输入框上方： ```vue <template> <el-form label-position="top"> <!-- 关键属性 --> <el-form-item label="用户名"> <el-input v-model="form.username" /> </el-form-item> <el-form-item label="密码"> <el-input v-model="form.password" type="password" /> </el-form-item> </el-form> </template> ``` **效果**：所有表单项的 label 会自动显示在输入框上方[^3]。 ### 方法二：自定义 CSS 样式（针对单个表单项） 通过 CSS 覆盖默认样式实现局部调整： ```vue <template> <el-form> <el-form-item class="label-top" label="邮箱"> <el-input v-model="form.email" /> </el-form-item> </el-form> </template> <style scoped> .label-top :deep(.el-form-item__label) { float: none; /* 解除浮动 */ display: block; /* 块级显示 */ text-align: left; /* 左对齐 */ padding-bottom: 8px; /* 增加与输入框的间距 */ } </style> ``` **特点**：使用 `:deep()` 穿透 scoped 样式，仅影响指定表单项[^4]。 ### 布局增强技巧 1. **响应式布局**（引用[5]方案）： ```vue <el-row> <el-col :span="8"> <el-form-item label="验证码" label-position="top"> <el-input v-model="form.captcha" /> </el-form-item> </el-col> </el-row> ``` 2. **自定义 label 内容**（引用[2][4]方案）： ```vue <el-form-item> <template #label> <div style="margin-bottom: 5px"> <!-- 增加下边距 --> <el-icon><Warning /></el-icon> 产品名称 </div> </template> <el-input v-model="form.productName" /> </el-form-item> ``` ### 注意事项 1. `label-position="top"` 会使所有表单项生效，若只需局部修改建议用 CSS 方案 2. 调整 `label-width` 属性可控制 label 的宽度比例 3. 使用 `el-col` 嵌套可优化复杂布局的响应式表现[^5] 最终效果：label 显示在输入框正上方，形成清晰的垂直布局，提升表单可读性。