之前遇到resetFields無效時都是自己手動用this.ruleForm = Object.assign({}, this.ruleForm, this.$options.data().ruleForm) 這種方式來清數據,用了這么久的form表單,resetFields真的是有時候生效有時候又不生效的,於是看了下Element源碼,終於發現了其中的奧秘
源碼的form-item在mounted的時候是這么寫的
mounted() {
if (this.prop) {
this.dispatch('ElForm', 'el.form.addField', [this]);
let initialValue = this.fieldValue;
if (Array.isArray(initialValue)) {
initialValue = [].concat(initialValue);
}
Object.defineProperty(this, 'initialValue', {
value: initialValue
});
this.addValidateEvents();
}
},
可以看到整個mounted操作都是基於你定義了prop才可以的,之后就是定義一個initialValue初始值,使用Object.defineProperty來定義默認是不可修改的,加writable屬性值才能修改,並且放到this下,然后執行resetFields時把值變成初始值,所以以后需要清空表單,又不想手動清空的那么prop是必須要定義了