Necesito hacer una copia de la tabla (la llamo tempData) de la original (tableData) y la tabla tempData es editable. Los datos en tempData deben guardarse en tempData solo cuando hago clic en el botón Guardar. Pero ahora DataTable cambia cuando edito las filas existentes en tempData sin hacer clic en el botón Guardar. Por favor, hágamelo saber si algo está mal, gracias.
(Usé el operador de propagación para copiar la tabla, pensé que era una copia superficial y tal vez es por eso que cambia la tabla de datos, pero cuando uso el botón Agregar para agregar nuevas filas, la tabla original no cambia hasta que los guardo)
datos temporales
<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>Tabla de datos
<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]; }, } }y también codepen: https://codepen.io/itayueat/pen/YzrNmLM
Gracias al comentario de @screwspike obtuve la solución.
Dado que el operador de propagación es una copia superficial, el uso de lodash.deepClone (que es una copia profunda) resuelve el problema de los datos cambiantes.
y escribí un deepClone, y si solo querías un deepClone, puedes usarlo:
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 }en el panel DataTable, que :data no debe ser tableData , el valor debe ser tempData