<el-form-item prop="problem_detail.project_phase" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' } ]" style="margin-left: 8px"> 将校验信息以行内的形式显示
时间: 2024-02-14 11:17:01 浏览: 4
你可以在 `el-form-item` 标签中添加 `show-message` 属性来将校验信息以行内的形式显示,例如:
```html
<el-form-item
prop="problem_detail.project_phase"
:rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' }] "
style="margin-left: 8px"
show-message
>
</el-form-item>
```
这样,当表单验证未通过时,错误信息会直接显示在表单项下方。
相关问题
<el-form-item prop="problem_detail.project_phase" :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' } ]" style="margin-left: 8px"> 将校验信息显示在输入框内
你可以在 `el-input` 组件中使用 `slot` 来自定义校验信息的显示位置,例如:
```html
<el-form-item
prop="problem_detail.project_phase"
:rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' }] "
style="margin-left: 8px"
>
<el-input v-model="formData.problem_detail.project_phase" placeholder="请输入项目阶段">
<template #prepend>
<span>项目阶段</span>
</template>
<template #append>
<el-tooltip :content="errors[0]" placement="top" :disabled="!errors[0]">
<i :class="['el-icon-warning', errors[0] ? 'is-error' : '']"></i>
</el-tooltip>
</template>
</el-input>
</el-form-item>
```
这里我们通过 `slot` 的方式,在 `el-input` 组件中添加了 `prepend` 和 `append` 插槽,将项目阶段的标题和校验信息分别显示在输入框前面和后面。同时,我们还使用了 `errors` 数组来获取表单项的错误信息,如果有错误信息,则会将错误信息显示在输入框后面的提示框中。
<el-form-item prop="problem_detail.project_phase" inline-message :rules="[ { required: true, message: '请输入邮箱地址', trigger: 'blur' } ]" style="margin-left: 8px"> 为何inline-message没有起到作用
`inline-message` 是 `el-form-item` 的一个属性,用来设置是否将校验信息以行内的形式显示。但是,使用 `inline-message` 属性时,需要同时将 `show-message` 属性设置为 `true`,才能起到作用。
所以,你需要将代码修改为以下形式:
```html
<el-form-item
prop="problem_detail.project_phase"
inline-message
:rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' }] "
style="margin-left: 8px"
show-message
>
</el-form-item>
```
这样,当表单验证未通过时,错误信息会以行内的形式显示在表单项后面。