当前位置: 首页 > news >正文

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

 1. :formatter的用法   :formatter 接受一个函数作为参数,这个函数有三个参数:row,column 和 cellValue。row 是当前行的数据,column 是当前列的数据,cellValue 是当前单元格的值。

   <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指向的就不在是一个地址,但是导致的问题则是编辑后点击确定无法更新表格数据。

   let _familyPersonForm = JSON.stringify(row)this.familyPerson.familyPersonForm = JSON.parse(_familyPersonForm);

 解决方法:

   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 对象),而不是创建一个新的对象。

 

 

http://www.lryc.cn/news/99668.html

相关文章:

  • Windows上安装和使用git到gitoschina和github上_亲测
  • MATLAB算法实战应用案例精讲-【深度学习】预训练模型GPTXLNet
  • Spring data JPA常用命令
  • Excel的使用
  • 大数据课程D4——hadoop的MapReduce
  • java策略模式
  • Vue2封装自定义全局Loading组件
  • docker 搭建jenkins
  • 【Docker】Docker 部署 Mysql 并设置数据持久化
  • 【ARM 常见汇编指令学习 5 -- arm64汇编指令 wzr 和 xzr】
  • 4.4 成员变量与局部变量的区别有哪些?
  • 学生管理系统-03项目案例(3)
  • Banana Pi BPI-KVM – 基于 Rockchip RK3568 SoC 的 KVM over IP 解决方案
  • 面试:Spring Cloud和Kubernetes的优缺点
  • TSINGSEE青犀视频安防监控视频平台EasyCVR新增密码复杂度提示
  • 前端开发中的正则表达式:解密规则的魔法
  • const的用法
  • 机器学习深度学习——模型选择、欠拟合和过拟合
  • IP 服务级别协议监控
  • Emvirus: 基于 embedding 的神经网络来预测 human-virus PPIs【Biosafety and Health,2023】
  • 安全文件传输:如何降低数据丢失的风险
  • AI绘画StableDiffusion实操教程:可爱头像奶茶小女孩(附高清图片)
  • java8 GroupingBy 用法大全
  • vue_router__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor
  • 前端html2canvas和dom-to-image实现截图功能
  • Hadoop平台集群之间Hive表和分区的导出和导入迁移(脚本)
  • Linux C语言实践eBPF
  • 垃圾回收标记阶段算法
  • 泰晓科技发布 Linux Lab v1.2 正式版
  • 王道数据结构-代码实操1(全注解版)