I need to make a copy table (I name it tempData) of the original one (tableData) and the tempData table is editable. The data in tempData should be saved to tempData only when I click the save button. But now the DataTable changes when I edit the existing rows in tempData without clicking the save button. Please let me know if something is wrong, thank you.
(I used spread operator to copy the table, I thought it was a shallow copy and maybe it's why the DataTable changes? but when I use add button to add new rows, the original tableData doesn't change until I save them)
tempData
<el-table
:data="tempData"
style="width: 100%">
<el-table-column
prop="name"
label="name"
width="180">
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
></el-input>
</template>
</el-table-column>
<el-table-column
prop="count"
label="count"
width="180">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.count"
></el-input-number>
</template>
</el-table-column>
</el-table>
DataTable
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="name"
width="180">
</el-table-column>
<el-table-column
prop="count"
label="count"
width="180">
</el-table-column>
</el-table>
JS
data() {
return {
tableData: [{
name: 'apple',
count: 10
},{
name: 'banana',
count: 20
}],
tempData:[]
}
},
created(){
this.tempData =
[...this.tableData];
},
methods:{
addRow() {
let list = {
name: this.name,
count: this.count,
};
this.tempData.push(list);
},
saveAll() {
this.tableData = [...this.tempData];
},
}
}
and also codepen:https://codepen.io/itayueat/pen/YzrNmLM
Thanks to the comment by @screwspike I got the solution
Since spread operator is a shallow copy, using lodash.deepClone (which is a deep copy) solves the changing data issue
and I wrote a deepClone ,and if you only wanted a deepClone , you can use it:
function deepClone(obj, hash = new WeakMap()) {
if (obj === null) {
return obj
}
if (obj instanceof Date) {
return new Date(obj)
}
if (obj instanceof RegExp) {
return new RegExp(obj)
}
if (obj instanceof Error) {
return new Error(obj.message)
}
if (typeof obj !== 'object') {
return obj
}
if (hash.has(obj)) {
return hash.get(obj)
}
hash.set(obj, obj)
let newObj = Object.create(null)
const keys = Reflect.ownKeys(obj)
for (const key of keys) {
const val = obj[key]
if (typeof val === 'object') {
newObj[key] = deepClone(val, hash)
} else {
newObj[key] = val
}
}
return newObj
}in DataTable panel,That :data property should not be tableData,the value should be tempData