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

news2024/9/25 7:14:27

 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.coloradmin.cn/o/806002.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Boot——Spring Boot启动原理

系列文章目录 Spring Boot启动原理 系列文章目录一、Spring Boot启动的宏观流程图二、Spring Boot启动流程2.1 初始化new SpringApplication2.1.1Spring Boot入口2.1.2初始化SpringApplication2.1.2.1判断当前应用程序类型2.1.2.2设置应用程序的所有初始化器(initializers)2.1.…

内置 NMOS 单路 PWM 控制的高调光比 LED 降压恒流控制器

概述 OC5401M 是一款内置调光 NMOS 的单路 PWM 控制的高调光比降压恒流驱动控制器&#xff0c;PWM 调光比最高可达 10000&#xff1a;1。 OC5401M 支持 16-60V 输入电压范围。 OC5401M 采用电流滞环控制方式&#xff0c;无需环路补偿。 OC5401M 可通过外接电阻设置 LED输出电流…

Python(四十九)获取列表指定元素的索引

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

Improving Cross-Modal Retrieval with Set of Diverse Embeddings

框架图&#xff1a; Using Triplet Loss: Smooth-Chamfer similarity Using Log-Sum-Exp,

matplotlib从起点出发(5)_Tutorial_5_styleSheets

1 使用样式表和rcParams自定义matplotlib 以下是自定义matplotlib的属性和默认样式的提示。 有三种方式来自定义matplotlib: 在运行时设置rcParams&#xff1b;使用样式表&#xff1b;改写matplotlibrc文件。 在运行时设置rcParams优先于样式表&#xff0c;样式表优先于matp…

[JavaWeb]SQL介绍-DDL语句

SQL介绍-DDL语句 一.SQL简介1.简介2.SQL通用语法3.SQL语言的分类 二.DDL-操作数据库与表1.DDL操作数据库2.DDL操作表①.查询表(Retrieve)②.创建表(Create)③.修改表(Update)④.删除表(Delete) 一.SQL简介 1.简介 SQL: Structured Query Language–结构化查询语言用来操作关系…

如图,△ABC中,AD是角平分线,E、F分别为AC、AB上的点,且∠AED+∠AFD=180°.试问:DE与DF有何关系,并说明理由.

Question&#xff1a; 如图&#xff0c;△ABC中&#xff0c;AD是角平分线&#xff0c;E、F分别为AC、AB上的点&#xff0c;且∠AED∠AFD180&#xff0e;试问&#xff1a;DE与DF有何关系&#xff0c;并说明理由&#xff0e; Answer&#xff1a; 分析&#xff1a;过D作DM⊥AB于…

postgresql搭建主备

文章目录 1. 要求2. 主库设置3. 主库创建复制槽、复制用户4. 导出主库5. 备库设置6. 备库创建standby.signal7. 启动备库8. 备库创建复制槽、查询数据9. 查看日志10. 测试切换11. 同步测试12. 监控主备状态 1. 要求 1.使用流复制&#xff0c;配置复制槽 2.只有一个备库时不配置…

技术分享 | 接口自动化测试中,文件上传该如何测试?

在服务端自动化测试过程中&#xff0c;文件上传类型的接口对应的请求头中的 content-type 为 multipart/form-data; boundary…&#xff0c;碰到这种类型的接口&#xff0c;使用 Java 的 REST Assured 或者 Python 的 Requests 均可解决。 实战练习 Python 版本 在 Python 版…

Mysql原理篇--第三章 事务与锁

文章目录 前言一、mysql 的事务1 .1 mysql 事务:1 .2 mysql 为什么要支持事务: 二、mysql的事务实现&#xff1a;2.1 mysql的事务隔离级别&#xff1a;2.2 mysql 脏读&#xff0c;不可重复读&#xff0c;幻读&#xff1a;2.2.1 脏读&#xff1a;2.2.2 不可重复读&#xff1a;2.…

生态共建 | 5-6月,YashanDB与14款产品完成兼容互认证

5-6月&#xff0c;深圳计算科学研究院崖山数据库系统YashanDB与中科可控信息产业有限公司、云基智慧工程股份有限公司、上海天玑数据技术有限公司、金蝶软件&#xff08;中国&#xff09;有限公司、上海布雷德科技有限公司、深圳市杉岩数据技术有限公司、广东中兴新支点技术有限…

prometheus和cAdvisor组合

文章目录 docker内部署PromethuesPrometheuscAdvisorPrometheus和cAdvisor关系配置 docker内部署Promethues Prometheus Prometheus是一个开源的系统监控和报警工具&#xff0c;由SoundCloud开发并在2012年捐赠给了Cloud Native Computing Foundation (CNCF)。它被广泛用于监…

CAN学习笔记1:计算机网络

计算机网络 1 概述 计算机网络就是把多种形式的计算机用通信线路连接起来&#xff0c;并使其能够互相进行交换的系统。实际上&#xff0c;计算机网络包括了计算机、各种硬件、各种软件、组成网络的体系结构、网络传输介质和网络通信计数。因此&#xff0c;计算机网络是计算机…

第G3周:CGAN|生成手势图像

目录 一、准备工作1. 导入数据2. 数据可视化 二、构建模型1. 构建生成器2. 构建鉴别器 三、训练模型1. 定义损失函数2. 定义优化器3. 训练模型 四、理论基础1.DCGAN原理2.DCGAN网络3.个人感悟 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f…

自动化测试:让软件测试更高效更愉快!

谈谈那些实习测试工程师应该掌握的基础知识&#xff08;一&#xff09;_什么时候才能变强的博客-CSDN博客https://blog.csdn.net/qq_17496235/article/details/131839453谈谈那些实习测试工程师应该掌握的基础知识&#xff08;二&#xff09;_什么时候才能变强的博客-CSDN博客h…

【C++ 进阶】学习导论:C/C++ 进阶学习路线、大纲与目标

目录 一、C 学习路线 二、C 课程大纲与学习目标 &#xff08;1&#xff09;第一阶段&#xff1a;C 语言基础 &#xff08;2&#xff09;第二阶段&#xff1a;C 高级编程 &#xff08;3&#xff09;第三阶段&#xff1a;C 核心编程与桌面应用开发 &#xff08;4&#xf…

Cpp03 — 类和对象、this指针

一、类和对象 类由两部分构成&#xff1a;1.成员变量2.成员函数 C中的struct兼容C的所有用法&#xff0c;同时C中把struct升级成类 注意&#xff1a;类中的成员函数和成员数据都是声明&#xff0c;不是定义 类里的函数不是存到了对象中&#xff0c;而是存在公共区域&#x…

8.7 PowerBI系列之DAX函数专题-排名逻辑的4种实现-rankx详解

需求 实现 1 度量值 序号1排名 rankx(all(成绩表),成绩表[scoreandname],sum(成绩表[scoreandname])) --按照组合列排序2 rankx稀疏排名 rankx(all(成绩表),成绩表[分数],sum(成绩表[分数]),desc,skip) 3 rankx稠密排名 switch(true(),hasonevalue(成绩表[姓名])&#xff…

CCD光斑图像质量分析仪的作用和工作原理

激光光斑的成型在激光加工中起着至关重要的作用&#xff0c;在实际加工中激光可以被变换成各种形状以满足加工需求&#xff0c;激光光斑的形状大致可以被分为四种&#xff1a;矩形、环形、椭圆形、线形。矩形的激光光斑适用于激光切割、激光焊接&#xff0c;环形的激光光斑适用…

契约测试之 - 使用Pact-JS编写契约测试

契约测试是一种通过对每个应用程序进行孤立检查&#xff0c;以确保其发送或接收的消息符合在“合同”中记录的共享理解的集成点测试技术。对于通过HTTP进行通信的应用程序&#xff0c;这些“消息”将是HTTP请求和响应&#xff0c;而对于使用队列的应用程序&#xff0c;则是放入…