element-ui的form表单自定义校验时星号(*)丢失后添加星号

文章展示了如何向VueElementUI的el-form-item组件添加自定义类名show_start,并通过CSS样式设置其内部标签添加星号(*)作为必填项提示,颜色设为红色并增加内边距。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 向 el-form-item 元素添加类名 show_start

<el-form-item label="xxx" prop="xxx" class="show_start"></el-form-item>

2. css样式中添加如下代码即可

.show_start {
  position: relative;
  .el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}
### 调整 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> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值