el-form重置动态表单formData中的引用类型数据的属性值

背景：在项目开发中遇到了动态添加表单项的需求，就是表单项可以根据需要进行增减。并且一添加就是好几个表单项的那种，于是我便将这几个表单项组成一组（一个对象 {key: value} ）放到一个数组里边（[{ key: value }, ...]），那么最终的formData的结构就是这样：

formData: {
    formItemArray: [
        {
            name: '',
            age: '',
            gender: ''
        },
        ...
    ]
}

模板中是这样去渲染表单的：

<el-row v-for="(item, index) in formItemArray" :key="index">
    <el-form-item>
        <el-input v-model="item.name"></el-input>
    </el-form-item>
    <el-form-item>
        <el-input v-model="item.age"></el-input>
    </el-form-item>
    <el-form-item>
        <el-select v-model="item.gender">
            <el-option v-for="option in [{ value: 1, label: '男' }, { value: 0, label: '女' }]"  
            :key="option.value" 
            :label="option.label" 
            :value="option.value"></el-option>
        </el-select>
    </el-form-item>
</el-row>

重置的方法：

Vue2:

this.formData.formItemArray = this.$options.data().formItemArray

属性	说明
$options	可以拿到当前组件实例的初始状态，data中的数据等等都是初始的