当前位置: 首页 > 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 对象),而不是创建一个新的对象。

 

 

相关文章:

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

1. :formatter的用法 :formatter 接受一个函数作为参数&#xff0c;这个函数有三个参数&#xff1a;row&#xff0c;column 和 cellValue。row 是当前行的数据&#xff0c;column 是当前列的数据&#xff0c;cellValue 是当前单元格的值。 <el-table-column prop"SYS…...

Windows上安装和使用git到gitoschina和github上_亲测

Windows上安装和使用git到gitoschina和github上_亲测 git介绍与在windows上安装创建SSHkey在gitoschina使用 【git介绍与在windows上安装】 Git是一款免费、开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 相关介绍可以参考 <百度百科>…...

MATLAB算法实战应用案例精讲-【深度学习】预训练模型GPTXLNet

目录 GPT 1. 介绍 1.1 GPT的动机 2. 模型结构 3. GPT训练过程 3.1 无监督的预训练...

Spring data JPA常用命令

简介 Spring Data JPA是Spring框架的一部分&#xff0c;它提供了一个简化的方式来与关系型数据库进行交互。JPA代表Java持久化API&#xff0c;它是Java EE规范中定义的一种对象关系映射&#xff08;ORM&#xff09;标准。Spring Data JPA在JPA的基础上提供了更高级的抽象&…...

Excel的使用

1.EXCEL诞生的意义 1.1 找到想要的数据 1.2 提升输入速度 2.数据分析与可视化操作 目的是提升数据的价值和意义 3.EXCEL使用的内在意义和外在形式 4.EXCEL的价值 4.1 解读及挖掘数据价值 4.2 协作板块 4.3 展示专业度 4.4 共享文档内容 5.人的需求》》软件功能...

大数据课程D4——hadoop的MapReduce

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解MapReduce的作用和特点; ⚪ 掌握MapReduce的组件; ⚪ 掌握MapReduce的Shuffle; ⚪ 掌握MapReduce的小文件问题; ⚪ 掌握MapReduce的压缩机制; ⚪ 掌握MapReduce的推测执行机制…...

java策略模式

在Java中&#xff0c;策略模式&#xff08;Strategy Design Pattern&#xff09;用于定义一系列算法&#xff0c;并将每个算法封装成单独的类&#xff0c;使得它们可以互相替换&#xff0c;让客户端在使用算法时不需要知道具体的实现细节。策略模式是一种行为型设计模式&#x…...

Vue2封装自定义全局Loading组件

前言 在开发的过程中&#xff0c;点击提交按钮&#xff0c;或者是一些其它场景总会遇到Loading加载框&#xff0c;PC的一些UI库也没有这样的加载框&#xff0c;无法满足业务需求&#xff0c;因此可以自己自定义一个&#xff0c;实现过程如下。 效果图 如何封装&#xff1f; 第…...

docker 搭建jenkins

1、拉取镜像 docker pull jenkins/jenkins:2.4162、创建文件夹 mkdir -p /home/jenkins_mount chmod 777 /home/jenkins_mount3、运行并构建容器 docker run --restartalways -d -p 10240:8080 -p 10241:50000 -v /home/jenkins_mount:/var/jenkins_home -v /etc/localtime:…...

【Docker】Docker 部署 Mysql 并设置数据持久化

文章目录 1. Docker持久化MySQL2. 测试删除MySQL容器后新建容器&#xff0c;数据还在不在3. 参考资料 我们使用Docker的目的就是图它方便下载部署&#xff0c;不用常规的经历下载、配置、安装等等繁琐的步骤。但是与此同时Docker也存在一些缺点&#xff0c;像删除容器后数据就都…...

【ARM 常见汇编指令学习 5 -- arm64汇编指令 wzr 和 xzr】

文章目录 ARM64 zero registerARMv8 zero 寄存器的背景xzr 在寄存器读写操作中的使用 上篇文章&#xff1a;ARM 常见汇编指令学习 4 – ARM64 比较指令 cbnz 与 b.ne 区别 下篇文章&#xff1a;ARM 常见汇编指令学习 6 - bic(位清除), orr(位或), eor(异或) ARM64 zero registe…...

4.4 成员变量与局部变量的区别有哪些?

文章目录 4.5 创建一个对象用什么运算符?对象实体与对象引用有何不同?4.6 一个类的构造方法的作用是什么? 若一个类没有声明构造方法&#xff0c;该程序能正确执行吗? 为什么?4.7 构造方法有哪些特性&#xff1f;4.8 在调用子类构造方法之前会先调用父类没有参数的构造方法…...

学生管理系统-03项目案例(3)

一、用户列表 1、编写api接口 //导入封装后的axios import {instance} from /util/request export default{getUsers:params>instance.get(/users/getUsers,{params}) } 2、表格渲染 <template><el-card><!-- 当el-table元素中注入data对象数组后&#x…...

Banana Pi BPI-KVM – 基于 Rockchip RK3568 SoC 的 KVM over IP 解决方案

Banana Pi 已经开始开发基于 Rockchip RK3568 SoC 的 BPI-KVM 盒&#xff0c;但它不是迷你 PC&#xff0c;而是 KVM over IP 解决方案&#xff0c;旨在远程控制另一台计算机或设备&#xff0c;就像您在现场一样&#xff0c;例如能够打开和关闭连接的设备、访问 BIOS 等。 商业…...

面试:Spring Cloud和Kubernetes的优缺点

Spring Cloud 优点 spring cloud是从应用框架层面解决微服务架构的一部分&#xff0c;如网关、服务发现、负载平衡、配置管理、指标跟踪等&#xff0c;易于Java开发者上手。 缺点 缺乏打包、持续集成、伸缩、高可用和自我修复等&#xff0c;且局限于Java平台。 Kubernetes …...

TSINGSEE青犀视频安防监控视频平台EasyCVR新增密码复杂度提示

智能视频监控平台TSINGSEE青犀视频EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTM…...

前端开发中的正则表达式:解密规则的魔法

引言 在前端开发中&#xff0c;正则表达式是一个强大且不可或缺的工具&#xff0c;它可以帮助我们处理和验证字符串数据。无论是表单验证、数据提取还是字符串替换&#xff0c;正则表达式都可以发挥巨大的作用。本篇博客将全面介绍前端开发中的正则表达式&#xff0c;包括基本…...

const的用法

目录 const的基本理解 C和C中const的区别 代码段 不初始化or初始化 常变量or常量 编译方式 备注开发环境&#xff1a;vscode通过ssh连接虚拟机中的ubuntu&#xff0c;ubuntu-20.04.3-desktop-amd64.iso const的基本理解 const修饰的变量不能作为左值 const修饰的变量初…...

机器学习深度学习——模型选择、欠拟合和过拟合

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——多层感知机的简洁实现 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有…...

IP 服务级别协议监控

工作场所分布在全球多个地点的企业通过 WAN 链接共享和接收数据&#xff0c;这需要跨广泛的网络位置和路径持续监控网络质量&#xff0c;以实现优化的性能水平和不间断的服务交付。 IP 服务水平协议 IP 服务级别协议 &#xff08;IP SLA&#xff09; 是一种网络测量技术&…...

新手友好:在快马平台上通过实践快速掌握trea核心概念

作为一个刚接触trea技术的新手&#xff0c;我最近在InsCode(快马)平台上找到了特别适合入门的学习方式。这个平台最让我惊喜的是&#xff0c;不需要从零开始搭建环境&#xff0c;就能直接动手实践trea的核心概念。 理解trea的基本原理 刚开始接触trea时&#xff0c;最困惑的就…...

革新性STL文件管理工具:让3D模型预览效率提升80%的Windows解决方案

革新性STL文件管理工具&#xff1a;让3D模型预览效率提升80%的Windows解决方案 【免费下载链接】STL-thumbnail Shellextension for Windows File Explorer to show STL thumbnails 项目地址: https://gitcode.com/gh_mirrors/st/STL-thumbnail 问题发现&#xff1a;3D设…...

揭秘100.64.0.0/10:运营商级NAT如何重塑IPv4网络格局

1. 100.64.0.0/10&#xff1a;这个神秘IP段到底是什么&#xff1f; 第一次在路由器后台看到100.64.0.1这个IP时&#xff0c;我整个人都懵了——这既不是常见的192.168局域网地址&#xff0c;也不是公网IP。就像发现自家门牌号突然变成了酒店房间号&#xff0c;这种违和感促使我…...

从零到一:基于51单片机与DS1302的智能万年历系统设计与实现

1. 项目背景与核心功能 每次看到桌面上那些动辄几百块的智能时钟&#xff0c;我都会想&#xff1a;这东西真的需要这么贵吗&#xff1f;作为一个玩了多年51单片机的老鸟&#xff0c;我决定用最基础的STC89C52芯片搭配DS1302时钟模块&#xff0c;打造一个功能不输商业产品的智能…...

MATLAB导纳控制仿真入门:从零开始搭建单自由度模型(附完整代码)

MATLAB导纳控制仿真入门&#xff1a;从零开始搭建单自由度模型&#xff08;附完整代码&#xff09; 导纳控制作为机器人柔顺控制的核心算法之一&#xff0c;在医疗机器人、协作机器人等领域有着广泛应用。想象一下外科手术机器人需要精准感知医生操作力并做出柔顺响应&#xff…...

5分钟完成Axure RP中文汉化:小白也能轻松上手的终极教程

5分钟完成Axure RP中文汉化&#xff1a;小白也能轻松上手的终极教程 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在为Axure…...

3步打造游戏性能优化神器:DLSS Swapper零基础掌握指南

3步打造游戏性能优化神器&#xff1a;DLSS Swapper零基础掌握指南 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款专为PC游戏玩家设计的DLSS版本管理工具&#xff0c;通过自动化版本切换、智能游戏扫…...

为什么你的C盘空间总是不够用?可能是Windows驱动文件在悄悄“发胖“

为什么你的C盘空间总是不够用&#xff1f;可能是Windows驱动文件在悄悄"发胖" 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 想象一下这样的场景&#xff1a;你的电脑C盘明明…...

Pixel Language Portal 软件测试实战:根据需求自动生成测试用例与脚本

Pixel Language Portal 软件测试实战&#xff1a;根据需求自动生成测试用例与脚本 1. 引言&#xff1a;测试自动化的新范式 在敏捷开发大行其道的今天&#xff0c;测试工程师们常常面临这样的困境&#xff1a;需求变更频繁&#xff0c;测试用例维护成本高&#xff1b;手工编写…...

Wan2.2-I2V-A14B私有部署实战教程:RTX 4090D一键生成1080P视频

Wan2.2-I2V-A14B私有部署实战教程&#xff1a;RTX 4090D一键生成1080P视频 1. 开篇&#xff1a;为什么选择私有部署 当你需要频繁生成高质量视频内容时&#xff0c;公有云服务往往面临三个痛点&#xff1a;生成排队时间长、隐私数据风险、调用成本高。Wan2.2-I2V-A14B私有部署…...