el-form的resetFields()方法不生效的原因及解决方法


1.prop属性值需要与form中的key字段保持性一致

2.当页面是编辑页面的时候打开弹框使用

this.$refs.proTypeForm.$refs.checkform.resetFields()的方式调用的话 会发现重置按钮不生效,具体是由于该方法的底层机制导致
原因是form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准;
Dialog 中的内容是懒加载的,目前 edit (更新)方法的写法导致 Form 刚加载出来时值就已经是新的了,所以 resetFields 也只能重置到初始化的页面值即第一次显示的数据

解决方法

  2.1重写form表单的resetFields() 

 resetFields() {

 this.$set(this.ruleForm, 'build', '')
this.$set(this.ruleForm, 'buildChild', [])
this.$set(this.ruleForm, 'operate', [])
this.$set(this.ruleForm, 'service', [])
},

2.2在获取表单数据的的时候利用this.$nextTick()
watch: {
proDataForm: {
handler() {
this.$nextTick(()=>{
this.ruleForm = this.proDataForm
})
},
immediate: true
}
},


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM