el-input必填项样式不是默认
时间: 2024-12-22 22:18:14 浏览: 47
`el-input`是Element UI库中的输入框组件,在Vue.js中常用于表单开发。默认情况下,如果`v-model`绑定的数据是空字符串或者是`null`,`el-input`不会显示必填星号(`*`)标识它是一个必填字段。如果你希望在默认状态下就有必填提示,你需要自定义一些样式或者通过指令添加额外的验证。
一种常见的做法是在CSS中为`.el-form-item.is-required .el-input__inner`选择器设置样式,添加一个红色的边框线或必填星号。例如:
```css
.el-form-item.is-required .el-input__inner {
border-bottom-color: red;
&:after {
content: "*";
color: red;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
}
```
如果你想在`el-form`组件上全局配置,可以监听`required`属性变化并动态应用样式:
```javascript
<template>
<el-form :model="form" @validate="handleValidate">
<!-- ... -->
</el-form>
</template>
<script>
export default {
data() {
return {
form: { ... },
requiredClass: '',
};
},
methods: {
handleValidate(form) {
if (form.required && !form.validateFields().every(field => field.valid)) {
this.$refs.form.addValidateRule('yourField', '此项必填', { required: true });
this.requiredClass = 'is-required';
} else {
this.requiredClass = '';
}
}
},
watch: {
form: {
immediate: true,
handler(newVal, oldVal) {
// 更新CSS class
this.$refs.form.$el.classList.toggle(this.requiredClass, !!newVal.required);
},
},
},
};
</script>
```
阅读全文
相关推荐


















