zoukankan      html  css  js  c++  java
  • 对象数组深拷贝(表单提交页面,有重置功能) 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>
    
    
  • 相关阅读:
    Balanced Binary Tree
    Swap Nodes in Pairs
    Reverse Nodes in k-Group
    Reverse Linked List II
    Remove Nth Node From End of List
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Partition List
    Merge Two Sorted Lists
    【Yii2.0】1.2 Apache检查配置文件语法
  • 原文地址:https://www.cnblogs.com/lige1234/p/14766795.html
Copyright © 2011-2022 走看看