Vue.js Element-UI el-table：制作复制表进行编辑，可以将数据保存到原表

Posted 2023-02-16

【中文标题】Vue.js Element-UI el-table：制作复制表进行编辑，可以将数据保存到原表

【英文标题】：Vue.js Element-UI el-table: make a copy table for editing and can save data to original table

【发布时间】：2022-01-18 09:45:53

【问题描述】：

我需要制作一个原始表（tableData）的副本表（我将其命名为 tempData），并且 tempData 表是可编辑的。 只有当我点击保存按钮时，tempData 中的数据才会被保存到 tempData。 但是现在，当我在 tempData 中编辑现有行而不单击保存按钮时，DataTable 会发生变化。 如果有问题请告诉我，谢谢。

（我使用扩展运算符复制表，我认为这是一个浅拷贝，也许这就是 DataTable 更改的原因？但是当我使用添加按钮添加新行时，原始 tableData 在我保存它们之前不会更改)

临时数据

 <el-table
      :data="tempData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="name"
        >
       <template slot-scope="scope">
        <el-input
            v-model="scope.row.name"
         ></el-input>
       </template>
      </el-table-column>
   
      <el-table-column
        prop="count"
        label="count"
        >
        <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"
        >
      </el-table-column>
      <el-table-column
        prop="count"
        label="count"
        >
      </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

【问题讨论】：

我觉得你是对的，问题是...，而当你用...复制Array时，你可以得到一个点拷贝，两个点指向同一个内存，所以你可以使用一些深度克隆方法，例如 lodash.deepClone 或编写自定义的深度克隆方法

@screwspike 感谢您的评论，所以现在我正在学习 lodash 方法。

不客气

嘿 lodash.deepClone 解决了我的问题！谢谢你:-)

【参考方案1】：

我写了一个 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

【参考方案2】：

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

由于扩展运算符是浅拷贝，因此使用 lodash.deepClone（它是深拷贝）解决了不断变化的数据问题

【参考方案3】：

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

【讨论】：

这里是代码，只修改了一个属性codepen.io/lyrieek/pen/ZEXeEdO

我确实想在 DataTable 中显示 tableData 的数据。无论如何感谢您的回复:-)