南昌加盟网站制作,莱西网站建设,网页微信版本,网站设计建议使用ElementUI中的resetFields()方法有哪些注意点
场景一 场景一#xff1a;当编辑弹出框和新增弹出框共用时#xff0c;编辑数据后关闭编辑弹出框时调用this.$refs.form.resetFields()无法清空弹出框 问题代码#xff1a; // 点击新增按钮handleAdd() {this.dialogVi…使用ElementUI中的resetFields()方法有哪些注意点
场景一 场景一当编辑弹出框和新增弹出框共用时编辑数据后关闭编辑弹出框时调用this.$refs.form.resetFields()无法清空弹出框 问题代码 // 点击新增按钮handleAdd() {this.dialogVisible truethis.modalType 0},// 弹窗关闭触发handleClose() {// 清空表单this.$refs.form.resetFields()this.dialogVisible false},handleEdit(val) {// console.log(val)this.dialogVisible truethis.modalType 1// 注意需要对当前数据进行深拷贝否则会this.form val// this.form JSON.parse(JSON.stringify(val))}问题分析 原因是由于restFile只是将表单的值初始化并不是清空表单详情见ElementUI官网 当我们点击编辑按钮时由于是this.form val导致表单的初始值发生了改变此时就会你点击关闭弹窗后再打开会发现表单还是第一次点击编辑按钮的那个值即使你后面又点击了编辑按钮它最终只显示第一次点击编辑按钮出现的那个表单的值。 解决方案表单赋值时采用深拷贝
场景二
场景二表单没有配置:model属性和prop属性 注意要想resetFields()方法生效一定要配置这两项
场景三
场景三在还没有显示对话框之前就调用resetFields()方法导致不起作用 解决方法 通过延迟调用resetFields()方法代码如下this.$nextTick(() {this.$refs[form].resetFields();
});参考文章 this.$refs[‘form‘].resetFields()方法重置表单无效的坑vue.nextTick()方法的使用详解简单明了
