element form.resetFields重置表单无效

1,768 阅读1分钟

今天在做项目的时候用到了element的form表单的resetFields方法,发现表单并没有重置

于是看了下源码:

form-item.vue
mounted: function mounted() {
    if (this.prop) {
      this.dispatch('ElForm', 'el.form.addField', [this]);

      var initialValue = this.fieldValue;
      if (Array.isArray(initialValue)) {
        initialValue = [].concat(initialValue);
      }
      Object.defineProperty(this, 'initialValue', {
        value: initialValue
      });

      this.addValidateEvents();
    }
}
form.vue
created(){
    this.$on('el.form.addField', (field) => {
        if (field) {
          this.fields.push(field);
        }
    });
},
methods: {
    resetFields() {
        if (!this.model) {
          console.warn('[Element Warn][Form]model is required for resetFields to work.');
          return;
        }
        this.fields.forEach(field => {
          field.resetField();
        });
    }
}

从代码中可以看出,form表单必须要设置model属性并且form-item组件上必须要添加prop属性,才会触发resetField方式重置表单项