对象数组深拷贝（表单提交页面，有重置功能） vue项目中

Posted 2021-05-14 sunshineG

表单提交需要重置功能时，如果不先把原始数据拷贝一份，修改之后，再重置会回不去！！！（对象或数组引用数据类型）

封装一个公共的方法：如下，一般放在项目的utils文件夹中utils.js中，

/**
 * @param data 需要深拷贝的数据
 * @returns {*} 返回拷贝之后的数据
 */
  function deepCopy(data){
    const t = typeof data;
    let o;
    if(t===\'array\'){
        o = []
        for(let i = 0;i<data.length;i++){
            o.push(deepCopy(data[i]))
        }
    }else if(t===\'object\'){
        o = {}
        for(let i in data){
            o[i] = deepCopy(data[i])
        }
    }
    return o;
}
export default{
    deepCopy
}

使用：

<template>
    
</template>
<script>
import utils from \'@/utils/utils\'

export default {
    data(){
       return {
           formInfo:{},//表单的初始数据
           defaultFormInfo:{},
       } 
    },
    methods:{  
        reset(){//重置按钮
            this.formInfo = this.defaultFormInfo
        },
        infoCommit(){
            let params = utils.deepCopy(this.formInfo)
            // params 编辑好的内容传到后端
        },

    },
    created(){
        // 使用深拷贝的目的就是：防止formInfo的修改影响到defaultFormInfo,想要重置（不想修改）的时候，点击重置回不去
        this.defaultFormInfo = utils.deepCopy(this.formInfo)//先复制一份表单的初始数据
    }

}
</script>