Vue.js element-UI el-table: 制作副本table 用于编辑，可以将数据保存到原始table

Question

我需要复制原始数据 (tableData) 的副本 table（我将其命名为 tempData），临时数据 table 是 editable。 只有当我点击保存按钮时，tempData 中的数据才会保存到 tempData。 但是现在，当我在不单击保存按钮的情况下编辑 tempData 中的现有行时，DataTable 发生了变化。如有不妥请告知，谢谢

（我使用扩展运算符复制 table，我认为这是一个浅拷贝，也许这就是 DataTable 更改的原因？但是当我使用添加按钮添加新行时，原来的 table数据在我保存之前不会改变）

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>

数据表

<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];
      },
  }
    }

还有codepen:https://codepen.io/itayueat/pen/YzrNmLM

Answer 1

感谢@screwspike 的评论，我得到了解决方案

由于展开算子是浅拷贝，使用lodash.deepClone（深拷贝）解决了数据变化问题

Answer 2

我写了一个 deepClone ，如果你只想要一个 deepClone ，你可以使用它：

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
}

Answer 3

在DataTable面板中，:data 属性不应该是tableData，值应该是tempData

Vue.js element-UI el-table: 制作副本table 用于编辑，可以将数据保存到原始table

Vue.js Element-UI el-table: make a copy table for editing and can save data to original table

javascript

vuejs2

element-ui