对象数组深拷贝(表单提交页面,有重置功能) vue项目中

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

封装一个公共的方法:如下,一般放在项目的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>

上一篇:[Utils] Sublime Text 常用快捷键


下一篇:用Taro写一个微信小程序(二)——配置目录别名