表单提交需要重置功能时,如果不先把原始数据拷贝一份,修改之后,再重置会回不去!!!(对象或数组引用数据类型)
封装一个公共的方法:如下,一般放在项目的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>