element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置

先看需求场景（当我们绑定的formData中有嵌套对象时，el-form的resetFields并不能帮我们重置）

<template>
    <el-form :model="formData">
        <!--  
        ...
        ...这里el-form-item都绑定了prop
        ...
        -->
    </el-form>
</template>
<script>
export default {
    data () {
        return {
            formData: {
                prop1: '',
                prop2: [],
                prop3: {
                    subProp1: '',
                    subProp2: ''
                }
            }
        }
    }
}
</script>

二次封装覆盖el-form-item源码中的方法

<script>
import Vue from 'vue';
import elFormItem from 'element-ui/lib/form-item';
import { getPropByPath } from 'element-ui/src/utils/util';
import { cloneDeep } from 'lodash';

function isObject(obj) {
  return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
}

export default Vue.extend({
  extends: elFormItem,
  data() {
    return {
      internalInitialValue: null,
    };
  },
  mounted() {
    if (this.prop) {
      this.internalInitialValue = isObject(this.initialValue) ? cloneDeep(this.initialValue) : this.initialValue;
    }
  },
  methods: {
    // 重置resetField方法
    resetField() {
      this.validateState = '';
      this.validateMessage = '';

      let model = this.form.model;
      let value = this.fieldValue;
      let path = this.prop.replace(/:/, '.');

      let prop = getPropByPath(model, path, true);
      this.validateDisabled = true;

      if (Array.isArray(value)) {
        prop.o[prop.k] = [].concat(this.internalInitialValue);
      } else if (isObject(this.internalInitialValue)) {
        prop.o[prop.k] = cloneDeep(this.internalInitialValue);
      } else {
        prop.o[prop.k] = this.internalInitialValue;
      }

      this.$nextTick(() => {
        this.validateDisabled = false;
      });
    },
  },
});
</script>