el-form中:inline

在el-form中，可以通过设置rules中的message属性来自定义验证失败时的提示信息样式。如果你不想直接修改el-form-item__error类的样式，可以考虑以下两种方法来实现在input下方显示提示信息的样式：

1. 使用slot-scope来自定义验证失败的提示信息在input下方显示的位置。在el-form-item组件中，可以使用slot-scope属性来自定义插槽内容。通过在el-form-item上添加一个名为header的插槽，并在插槽中添加自定义的提示信息。然后，使用v-if或v-show指令根据验证的状态来控制插槽是否显示。这样可以让提示信息在input下方显示，而不是在el-form-item的右侧。

2. 使用自定义样式类来修改提示信息的样式。如果你希望全局的提示信息样式不受影响，可以通过添加自定义的样式类来修改提示信息的样式。在el-form-item组件上添加一个class属性，并为其指定一个自定义的样式类，然后在样式表中为该类设置样式。这样可以只修改当前el-form-item下的提示信息样式，而不会影响到全局的样式。

这里是示例代码：

<el-form :model="form" :rules="rules" inline>
  <el-form-item label="Username" prop="username">
    <el-input v-model="form.username"></el-input>
    <template slot-scope="scope">
      <span v-if="scope.error" class="custom-error">{{ scope.error }}</span>
    </template>
  </el-form-item>
</el-form>

.custom-error {
  color: red;
  margin-top: 5px;
}

在上面的示例中，我们通过在el-form-item上添加一个名为header的插槽，并在插槽中使用v-if指令来判断是否显示自定义的错误信息。同时，我们也添加了一个自定义的样式类.custom-error来修改提示信息的样式。这样，提示信息会在input下方显示，并且样式只会应用在当前的el-form-item上，不会影响到全局的样式。<span class="em">1</span>
#### 引用[.reference_title]
- *1* [element表单验证中rules中的message样式怎么更改，:inline-message=“true“，el-form-item__error--inline](https://blog.csdn.net/daddykei/article/details/119739369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]