Element-UI 表单 在新增和编辑和详情是一个页面的情况下 如何在刚进页面时取消表单效验 在点击确定按钮时依然可以进行表单效验
时间: 2024-05-16 21:18:05 浏览: 117
Vue ~ element-ui 动态表单验证,支持添加和删除操作
5星 · 资源好评率100%
可以使用 Element-UI 的表单校验方法 `this.$refs.formName.validate()` 进行表单校验,其中 `formName` 为你在表单组件中定义的 `ref` 属性。
如果需要在进入页面时取消表单校验,可以在 `mounted` 钩子函数中先将表单的 rules 属性设置为空对象 `{}`,这样就不会进行表单校验了:
```javascript
mounted() {
this.$refs.formName.rules = {};
}
```
在点击确定按钮时,再将 rules 属性重新设置为表单校验规则即可:
```javascript
handleSubmit() {
this.$refs.formName.rules = {
// 表单校验规则
};
this.$refs.formName.validate(valid => {
if (valid) {
// 表单校验通过,执行提交操作
} else {
// 表单校验不通过,提示错误信息
}
});
}
```
这样就可以在进入页面时取消表单校验,在提交表单时再进行校验。
阅读全文