Vue使用el-dialog关闭后重置表单方式
作者：啧啧静
这篇文章主要介绍了Vue使用el-dialog关闭后重置表单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用el-dialog关闭后重置表单
el-dialog绑定close事件
这个有个注意得地方，可能有很多人会使用closed事件，close：Dialog 关闭的回调；closed：Dialog 关闭动画结束时的回调。
本人就是这么入坑得，使用了closed，然后会出现连续点击保存按钮会出现添加多条数据问题，原因是因为表单还没销毁前我就把按钮禁用状态放开了，导致了连续点击按钮出现多增数据问题，大家一定要注意额
重置表单数据
resetForms(formName) {
this.$refs[formName].resetFields();
}
表单验证清除
这个主要是加在el-dialog被打开之前，如果你点击一次保存按钮，是不会出现验证报红得问题得，但是你如果连续点击保存，就会出现验证问题了，这时候就需要添加清除验证拉。
this.$nextTick(() => {
this.$refs.formData.clearValidate();
});
Vue中el-dialog的用法
写入HTML
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="title + '原因'" prop="reason">
<el-input
v-model="form.reason"
:placeholder="'请输入' + title + '原因'"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
写入变量
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单校验
rules: {
reason: [
{ required: true, message: "参数名称不能为空", trigger: "blur" }
],
},
写入方法
// 表单重置
reset() {
this.resetForm("form");
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
//提交保存
}
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。