el-form-item清除样式
时间: 2024-01-17 15:19:05 浏览: 34
el-form-item清除样式可以通过以下两种方法实现:
1. 使用ref属性获取el-form-item的实例,然后调用clearValidate方法清除样式。
```html
<template>
<el-form ref="form" :model="formData" :rules="formRules">
<el-form-item label="用户名" prop="username" ref="usernameItem">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
username: ''
},
formRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
]
}
};
},
methods: {
clearFormItemStyle() {
this.$refs.usernameItem.clearValidate();
}
}
};
</script>
```
2. 使用v-if指令动态添加和删除el-form-item,这样可以重新渲染el-form-item,从而清除样式。
```html
<template>
<el-form :model="formData" :rules="formRules">
<el-form-item label="用户名" prop="username" v-if="showUsernameItem">
<el-input v-model="formData.username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
username: ''
},
formRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
]
},
showUsernameItem: true
};
},
methods: {
clearFormItemStyle() {
this.showUsernameItem = false;
this.$nextTick(() => {
this.showUsernameItem = true;
});
}
}
};
</script>
```