el-dialog中的x这么清空校验
时间: 2023-10-19 07:18:16 浏览: 61
如果您使用的是 Element UI 中的 el-dialog 组件,并想在关闭弹窗时清空表单校验,可以通过以下两种方式实现:
1. 使用 $refs 获取表单组件,然后手动调用 clearValidate() 方法进行清空。
```html
<template>
<el-dialog :visible.sync="dialogVisible" title="Dialog Title" @close="handleClose">
<el-form ref="form" :model="form" :rules="rules">
<!-- 表单内容 -->
</el-form>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
form: {
// 表单数据
},
rules: {
// 表单校验规则
}
};
},
methods: {
handleClose() {
// 关闭弹窗时清空表单校验
this.$refs.form.clearValidate();
}
}
};
</script>
```
2. 在 el-dialog 组件中使用 destroyOnClose 属性,这个属性可以控制在关闭弹窗时是否销毁 el-dialog 内部的组件,包括表单组件,这样就可以清空表单校验。
```html
<template>
<el-dialog :visible.sync="dialogVisible" title="Dialog Title" :destroy-on-close="true">
<el-form :model="form" :rules="rules">
<!-- 表单内容 -->
</el-form>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
form: {
// 表单数据
},
rules: {
// 表单校验规则
}
};
}
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![apk](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)