Angular实战记录---可编辑表格

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/87458371

编辑流程

• 原始数据 赋值到 临时变量。
• 使用临时变量填充表格。
• 修改表格即修改临时变量。
• 取消修改，使用原始数据覆盖临时变量。
• 提交修改，使用临时变量的数据覆盖原始数据。

---

全新的临时变量

但我们在使用原始数据和临时变量时存在拷贝问题，即修改了临时数据，原始数据也发生了改变。归根结底，就是变量直接赋值的时候，新变量和原变量的地址指向同一块内存地址，所以改新变量，也会改变原变量。以下是数组和对象的隔离拷贝：

• 数组赋值

  Lodash 深拷贝 =》 _.cloneDeep(value)

  this.tempTableData = _.cloneDeep(this.tableData);
  

• 对象赋值

  Lodash 深拷贝 =》 _.assign(object, [sources])

  this.tempTableData = _.assign({}, this.tableData);