formatter的用法,深拷贝, Object.assign 方法实战。

  1. :formatter的用法 :formatter 接受一个函数作为参数,这个函数有三个参数:row,column 和 cellValue。row 是当前行的数据,column 是当前列的数据,cellValue 是当前单元格的值。
javascript 复制代码
   <el-table-column prop="SYSC" label="试用时长(月)" 
                           :formatter="row => row.JZORSY === '兼职' ? '' : row.SYSC">
                          </el-table-column>

                          <el-table-column prop="JZORSY" label="兼职或试用">
                          </el-table-column>

2.在表格所在行点击编辑,打开弹窗。修改内容,没有点击确定的时候,表格的数据会随着编辑的更新而更新,这是由于数据没有序列化,使用JOSN进行一次序列号。这样row与this.familyPerson.familyPersonForm指向的就不在是一个地址,但是导致的问题则是编辑后点击确定无法更新表格数据。

javascript 复制代码
   let _familyPersonForm = JSON.stringify(row)
      this.familyPerson.familyPersonForm = JSON.parse(_familyPersonForm);

解决方法:

javascript 复制代码
   editFamilyPerson(row, column, event) {
      this.jtMoreIndex = 1;
      this.editData = JSON.parse(JSON.stringify(row));
      this.familyPerson.editId = row.id;
      this.familyPerson.familyPersonForm= this.editData 
      this.familyPerson.familyPersonDialogVisible = true;
    },

    // 编辑完后
    onEditComplete() {
      let row = this.familyPerson.list.find(item => item.id === this.familyPerson.editId);
      Object.assign(row, this.editData);
      this.familyPerson.familyPersonDialogVisible = false;
    },

创建了一个 editData 对象,这是通过深拷贝 row 对象得到的。这样做的目的是为了避免直接修改 row 对象,因为 row 对象是直接从父组件传递过来的,直接修改它可能会导致一些不可预见的问题。

然后,你将 editData 对象赋值给 familyPerson.familyPersonForm,这样就可以在表单中显示和编辑这些数据了。

在 onEditComplete 方法中,使用 Object.assign方法将 editData 对象的内容复制到了原始数据中。这样做的目的是为了更新原始数据,而不是创建一个新的对象。这是因为 Object.assign 方法会修改目标对象(即 row 对象),而不是创建一个新的对象。

相关推荐
IT_陈寒23 分钟前
Vue的这个响应式陷阱,我debug了一整天才爬出来
前端·人工智能·后端
cn_mengbei32 分钟前
用React Native开发OpenHarmony应用:Reanimated共享元素过渡
javascript·react native·react.js
kyriewen34 分钟前
前端测试:别为了100%覆盖率而写测试,那是自欺欺人
前端·javascript·单元测试
去伪存真44 分钟前
我自己写的第一个skills--project-core-standards
前端·agent
Data_Journal1 小时前
如何使用cURL更改User Agent
大数据·服务器·前端·javascript·数据库
掌心向暖RPA自动化1 小时前
如何获取网页某个元素在屏幕可见部分的中心坐标影刀RPA懒加载坐标定位技巧
java·javascript·自动化·rpa·影刀rpa
竹林8181 小时前
wagmi v2 多链钱包切换:一个 Uniswap 仿盘项目让我踩了三天坑
前端·javascript
donecoding1 小时前
Playwright MCP 页面捕获:Snapshot、截图、HTML 到底选哪个?
前端·ai编程·前端工程化
你也向往长安城吗1 小时前
最快的 JavaScript navmesh pathfinding3d 算法。
javascript
滕青山1 小时前
在线PDF拆分工具核心JS实现
前端·javascript·vue.js