在 Vue + Element UI 中，表单验证的提示信息默认是显示在
输入框的下方。如果你希望将**未
输入提示信息（即 `el-form-item` 的错误提示）显示在
输入框的
右侧**，可以通过自定义 `error` 插槽来实现。
---
## ✅ 实现方式：使用 `error` 插槽自定义提示位置
Element UI 的 `el-form-item` 提供了一个 `error` 插槽，可以让我们自定义错误提示的显示位置和
样式。
---
### ✅ 示例代码（将提示信息显示在
输入框右侧）
```html
<template>
<el-container style="min-height: 100vh;">
<el-main class="main-content">
<el-row justify="center">
<el-col :span="16">
<el-form
:model="form"
label-width="120px"
ref="form"
:rules="rules"
label-position="right"
class="center-form"
>
<!-- 课程名称 -->
<el-form-item label="课程名称" prop="courseName">
<div class="form-item-container">
<el-
input v-model="form.courseName" placeholder="请
输入课程名称"></el-
input>
<div class="custom-error">
<slot name="error"></slot>
</div>
</div>
</el-form-item>
<!-- 课程类型 -->
<el-form-item label="课程类型" prop="typeId">
<div class="form-item-container">
<el-select v-model="form.typeId" placeholder="请选择课程类型" @change="handleTypeChange">
<el-option
v-for="type in typeList"
:key="type.id"
:label="type.typeName"
:value="type.id"
></el-option>
</el-select>
<div class="custom-error">
<slot name="error"></slot>
</div>
</div>
</el-form-item>
<!-- 课程介绍 -->
<el-form-item label="课程介绍" prop="introduce">
<div class="form-item-container">
<el-
input
type="textarea"
:rows="4"
v-model="form.introduce"
placeholder="请
输入课程介绍"
></el-
input>
<div class="custom-error">
<slot name="error"></slot>
</div>
</div>
</el-form-item>
<!-- 提交按钮 -->
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
```
---
### ✅ 使用 `error` 插槽 + CSS
样式实现提示信息显示在
右侧
```html
<el-form-item label="课程名称" prop="courseName" :error-placement="'right'">
<div class="form-item-container">
<el-
input v-model="form.courseName" placeholder="请
输入课程名称"></el-
input>
<div class="custom-error" v-if="$slots.error">
<slot name="error"></slot>
</div>
</div>
</el-form-item>
```
但是 Element UI 并不直接支持 `error-placement` 属性，所以需要我们手动通过 `error` 插槽控制。
---
### ✅ 正确做法：使用 `error` 插槽 + `show-message` 控制
```html
<el-form-item label="课程名称" prop="courseName" :show-message="false">
<div class="form-item-container">
<el-
input v-model="form.courseName" placeholder="请
输入课程名称"></el-
input>
<div class="custom-error" v-if="formErrors.courseName">
{{ formErrors.courseName }}
</div>
</div>
</el-form-item>
```
```js
watch: {
form: {
deep: true,
handler(newVal) {
this.validateForm();
}
}
},
data() {
return {
formErrors: {
courseName: '',
typeId: '',
introduce: ''
}
};
},
methods: {
validateForm() {
this.$refs.form.validateField('courseName', (message) => {
this.formErrors.courseName = message;
});
this.$refs.form.validateField('typeId', (message) => {
this.formErrors.typeId = message;
});
this.$refs.form.validateField('introduce', (message) => {
this.formErrors.introduce = message;
});
}
}
```
---
### ✅ 配合 CSS 实现
右侧提示
样式
```css
.form-item-container {
display: flex;
align-items: center;
}
.custom-error {
color: #ff4949;
font-size: 12px;
margin-left: 10px;
white-space: nowrap;
}
```
---
## ✅ 效果说明：
- 每个表单项的错误提示显示在
输入框右侧。
- 使用 `custom-error` 类控制
样式。
- 通过 `validateField` 获取每个字段的校验错误信息。
---
## ✅ 优点：
- 更灵活地控制错误提示位置。
- 可以自定义
样式和布局。
- 适用于表单空间紧凑、需要节省垂直空间的场景。
---
###
扫一扫
5366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
