</el-form-item>表单校验红色星号在右边
时间: 2025-05-16 07:56:00 浏览: 39
### 调整 Element UI 中 `<el-form-item>` 的必填项红色星号位置
在 Element UI 中,默认情况下,`<el-form-item>` 组件会自动为标记为 `required=true` 的字段添加一个红色星号作为提示。默认的星号位置位于标签左侧。如果希望将其移动到右侧,则可以通过自定义样式实现。
以下是具体方法:
#### 方法一:通过覆盖 CSS 实现
可以利用 Element UI 提供的类名 `.el-form-item__label` 和伪元素 `::before` 来重新定位星号。
```css
/* 自定义红色星号的位置 */
.el-form-item.is-required .el-form-item__label:before {
content: ''; /* 清除原有的星号 */
}
/* 将星号放置在右侧 */
.el-form-item.is-required .el-form-item__label:after {
content: '*';
color: red;
margin-left: 4px; /* 可根据需求调整间距 */
}
```
上述代码的作用是清除原有左侧行星号,并通过伪元素 `:after` 在右侧行添加新的星号[^1]。
#### 方法二:修改 Form 表单项结构
另一种方式是对表单项目进行更细粒度的控制,将星号手动嵌入到模板中并绑定条件渲染逻辑。
```vue
<template>
<el-form :model="form">
<!-- 手动设置星号 -->
<el-form-item label="用户名" prop="username">
<span style="color:red;" v-if="rules.username.required">*</span>
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: { username: '' },
rules: {
username: { required: true }
}
};
}
};
</script>
```
此方法允许开发者完全掌控星号的具体展示行为及其布局[^2]。
#### 注意事项
当采用全局样式更改时,请注意可能影响其他页面中的相同组件表现形式;因此建议针对特定模块单独封装样式或者使用 scoped css 局部作用域来减少副作用。
```html
<style scoped>
/* Scoped styles only affect this component */
</style>
```
---
阅读全文
相关推荐







