关闭 el-dialog 表单充值
时间: 2023-10-04 17:07:40 浏览: 110
你可以在关闭 `el-dialog` 弹窗时,调用表单的 `resetFields` 方法来重置表单,达到重置表单的效果。具体的实现方法如下:
首先,在需要关闭的按钮或者方法中,调用 `el-dialog` 的 `close` 方法,同时在关闭前调用表单的 `resetFields` 方法:
```html
<!-- el-dialog 组件 -->
<el-dialog :visible.sync="dialogVisible" title="表单弹窗">
<!-- 表单组件 -->
<el-form ref="form" :model="form" label-width="80px">
<!-- 表单项 -->
...
</el-form>
<div slot="footer">
<el-button @click="resetForm">重置</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
```
```js
// 在 methods 中定义关闭和重置表单的方法
methods: {
// 关闭弹窗并重置表单
closeDialog() {
this.$refs.form.resetFields(); // 调用表单的 resetFields 方法
this.dialogVisible = false; // 关闭 el-dialog 弹窗
},
// 重置表单
resetForm() {
this.$refs.form.resetFields(); // 调用表单的 resetFields 方法
},
// 提交表单
submitForm() {
// 表单提交逻辑
...
}
}
```
这样,当你点击关闭按钮或者调用 `closeDialog` 方法时,就会首先调用表单的 `resetFields` 方法,然后关闭 `el-dialog` 弹窗,实现表单重置的效果。
阅读全文