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.mfbz.cn/a/54734.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2021年全国硕士研究生入学统一考试管理类专业学位联考写作试题——解析版

四、写作&#xff1a;第56~57小题&#xff0c;共65分。其中论证有效性分析30分&#xff0c;论说文35分。请答在答题纸相应的位置上。 56.论证有效性分析&#xff1a;分析下述论证中存在的缺陷与漏洞&#xff0c;选择若干要点&#xff0c;写一篇600字左右的文章&#xff0c;对该…

STM32 CAN通讯实验程序

目录 STM32 CAN通讯实验 CAN硬件原理图 CAN外设原理图 TJA1050T硬件描述 实验线路图 回环实验 CAN头文件配置 CAN_GPIO_Config初始化 CAN初始化结构体 CAN筛选器结构体 接收中断优先级配置 接收中断函数 main文件 实验现象 补充 STM32 CAN通讯实验 CAN硬件原理图…

MyBatis查询数据库

1.MyBatis 是什么&#xff1f; MyBatis 是⼀款优秀的持久层框架&#xff0c;它⽀持⾃定义 SQL、存储过程以及⾼级映射。MyBatis 去除了几乎所有的 JDBC 代码以及设置参数和获取结果集的⼯作。MyBatis 可以通过简单的 XML 或注解来配置 和映射原始类型、接⼝和 Java POJO&#…

CMake:为Eigen库使能向量化

CMake:为Eigen库使能向量化 导言构建Eigen项目结构CMakeLists.txt相关源码 导言 本篇开始将涉及检测外部库相关的内容&#xff0c;期间会穿插着一些其他的内容。为了能够使得系统在系统中运行Eigen库&#xff0c;我们首先需要在系统中配置好Eigen库。然后介绍与Eigen库相关的C…

【C++】STL——vector的模拟实现、常用构造函数、迭代器、运算符重载、扩容函数、增删查改

文章目录 1.模拟实现vector1.1构造函数1.2迭代器1.3运算符重载1.4扩容函数1.5增删查改 1.模拟实现vector vector使用文章 1.1构造函数 析构函数 在C中&#xff0c;vector是一个动态数组容器&#xff0c;可以根据需要自动调整大小。vector类提供了几个不同的构造函数来创建和初…

java 版本企业招标投标管理系统源码,多个行业+及时准确+全程电子化

&#xfeff; 项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&am…

Electron 系统通知 Notification 实践指南

系统通知是桌面应用的常见功能&#xff0c;用于给用户发送提醒&#xff08;刷下存在感 &#x1f642;&#xff09;&#xff0c;还能帮定点击事件以便后续的操作。 Electron 自带通知模块&#xff0c;下方代码是一个简单的示例 const { Notification } require(electron)cons…

【C#教程】零基础从入门到精通

今天给大家分享一套零基础从入门到精通&#xff1a;.NetCore/C#视频教程&#xff1b;这是2022年最新整理的、590G的开发教程资料。课程涵盖了.Net各方面的知识&#xff0c;跟着这个教程学习&#xff0c;就足够了。 课程分类 1、C#从基础到精通教程&#xff1b; 2、Winform从…

Framework开发的热度从未下降~

近几日&#xff0c;统计局也发布了就业相关数据&#xff0c;全国失业青年达600多万&#xff0c;面对此数据&#xff0c;我们能想到的是实际的失业人数肯定会比公布的数据要多很多&#xff0c;尤其是表示 “一周工作一小时以上” 也纳入了就业范围。 反观有一批Android开发在如此…

【数据挖掘torch】 基于LSTM电力系统负荷预测分析(Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

解决 MyBatis-Plus + PostgreSQL 中的 org.postgresql.util.PSQLException 异常

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

用C语言构建一个手写数字识别神经网络

(原理和程序基本框架请参见前一篇 "用C语言构建了一个简单的神经网路") &#xff11;&#xff0e;准备训练和测试数据集 从http://yann.lecun.com/exdb/mnist/下载手写数字训练数据集, 包括图像数据train-images-idx3-ubyte.gz 和标签数据 train-labels-idx1-ubyte.…

Mac 安装配置adb命令环境(详细步骤)

一、注意&#xff1a;前提要安装java环境。 因为android sdk里边开发的一些包都是依赖java语言的&#xff0c;所以&#xff0c;首先要确保已经配置了java环境。 二、在Mac下配置android adb命令环境&#xff0c;配置方式如下&#xff1a; 1、下载并安装IDE &#xff08;andr…

Django的生命周期流程图(补充)、路由层urls.py文件、无名分组和有名分组、反向解析(无名反向解析、有名反向解析)、路由分发、伪静态

一、orm的增删改查方法&#xff08;补充&#xff09; 1. 查询resmodels.表名(类名).objects.all()[0]resmodels.表名(类名).objects.filter(usernameusername, passwordpassword).all()res models.表名(类名).objects.first() # 判断&#xff0c;判断数据是否有# res如果查询…

UE4 unlua学习笔记

将这三个插件放入Plugins内并重新编译 创建一个BlueprintLibrary&#xff0c;声明一个全局函数 在这里声明路径 点击Create Lua Template 在Content的Script即可生成对应的lua文件打开它&#xff01; 显示以上lua代码 打印Hello Unlua 创建该UI&#xff0c;就会在创建UI的Con…

第5章 最佳实践

过去的错误 不要怪罪JavaScript 游览器遇到不合法的html会想尽办法将他展现出来游览器遇到不合法的js将拒绝执行它们并报错写js要保障自己代码的健壮性 质疑一切 写js功能前一定要考虑这个功能的合理性&#xff0c;避免造成不可预见的后果写js功能前一定要考虑用户的游览器…

企业级IT应用运维监控层次架构设计

企业基本都有自己的IT系统&#xff0c;而每个IT系统都有自己的监控系统。 企业级的IT应用监控架构是一种综合性的解决方案&#xff0c;涉及到很多层级和相应的工具。随着企业IT系统的规模和复杂程度的不断增加&#xff0c;监控和管理系统也面临着越来越大的挑战。 大家有时在…

视频监控汇聚平台EasyCVR告警消息生成后,合成录像显示不了是什么原因?

智能视频监控平台TSINGSEE青犀视频EasyCVR具备视频融合汇聚能力&#xff0c;作为安防视频监控综合管理平台&#xff0c;它支持多协议接入、多格式视频流分发&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&…

Redis事务、管道

一.Redis事务 1.概念 可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c;按顺序地串行化执行而不会被其它命令插入&#xff0c;不许加塞 2.Redis事务与数据库事物的区别 3.常用命令 4.事务执行情况 正常执行 即整个过程…

【应用层】HTTPS协议详细介绍

文章目录 前言一、什么是"加密"二、常见的加密方式三、数据摘要&#xff08;数据指纹&#xff09;四、证书总结 前言 HTTPS也是一个应用层协议&#xff0c;是在HTTP协议的基础上引入了一个加密层&#xff0c;由于HTTP协议内容都是按照文本的方式明文传输的&#xff…