记录可编辑表格(未完整)

news2024/9/21 9:20:19

每一行都独立

在这里插入图片描述

<el-table-column label="操作" width="220" fixed="right">
  <template #default="{ row, $index }">
    <el-button
        v-if="!row.tableEditFlag"
        type="primary"
        size="small"
        @click="startEdit($index,row.id)"
    >
      编辑
    </el-button>
    <template v-else>
      <el-button
          type="success"
          size="small"
          @click="saveEdit($index,row.id)"
      >
        保存
      </el-button>
      <el-button
          type="danger"
          size="small"
          @click="cancelEdit($index,row.id)"
      >
        取消
      </el-button>
    </template>
  </template>
</el-table-column>
  // 使用深拷贝来保存原始数据
  const originalData = ref(JSON.parse(JSON.stringify(tableData.value)))

  const startEdit = (index,id?) => {
    if (originalData.value[index] == null) {
      originalData.value[index] = JSON.parse(JSON.stringify(tableData.value[index]))
    }
    tableData.value[index].tableEditFlag = true
  }

  const saveEdit = (index,id?) => {
    const row = tableData.value[index]
    row.tableEditFlag = false
    // 更新原始数据
    originalData.value[index] = JSON.parse(JSON.stringify(row))
    // 调用接口保存数据
    updateExcelData1Api(originalData.value[index]).then(res => {
      modal.msgSuccess('保存成功')
    })
  }

  const cancelEdit = (index,id?) => {
    if (originalData.value[index] != null) {
      // 使用深拷贝来恢复数据,确保不会相互影响
      tableData.value[index] = JSON.parse(JSON.stringify(originalData.value[index]))
      tableData.value[index].tableEditFlag = false
    } else {
      // 如果原始数据不存在,我们可以选择删除这一行或者重置为默认值
      // 这里选择删除这一行
      tableData.value.splice(index, 1)
      originalData.value.splice(index, 1)
      modal.msgWarning('原始数据不存在,该行已被删除')
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2146819.html

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

相关文章

中间件:maxwell、canal

文章目录 1、底层原理&#xff1a;基于mysql的bin log日志实现的&#xff1a;把自己伪装成slave2、bin log 日志有三种模式&#xff1a;2.1、statement模式&#xff1a;2.2、row模式&#xff1a;2.3、mixed模式&#xff1a; 3、maxwell只支持 row 模式&#xff1a;4、maxwell介…

Vue 自定义指令实战

引言 Vue自定义指令是Vue.js框架中强大而灵活的功能之一&#xff0c;它允许开发者根据具体需求创建自定义的指令&#xff0c;以实现更加精细化的交互和数据绑定效果。本文将带你深入探索Vue自定义指令的使用方法、原理和实战&#xff0c;为你打开前端开发的新视野。 我们前面…

2024年汉字小达人区级自由报名备考冲刺:今年官方模拟题练一练

2024年第十一届汉字小达人的区级活动的时间9月25-30日正式开赛&#xff0c;还有一周就开始了。 有一些孩子刚刚被老师通知可以参加这个比赛&#xff0c;担心现在准备汉字小达人比赛是否来得及。根据我的经验&#xff0c;精准备考还是有希望的&#xff0c;也可以把这个比赛当做…

视频怎么提取音频?一键音频提取,视频内容轻松听!

视频怎么提取音频&#xff1f;一键解锁音频世界&#xff0c;让视频精彩不再静默&#xff01;无论您是忙碌于日常工作的上班族&#xff0c;还是热衷于学习的求知者&#xff0c;亦或是享受闲暇时光的聆听者&#xff0c;一键提取音频功能让视频内容瞬间转化为耳畔的温柔低语&#…

51单片机——直流电机驱动

1、直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极&#xff0c;当电极正接时&#xff0c;电机正转&#xff0c;当电极反接时&#xff0c;电机反转。 直流电机主要由永磁体&#xff08;定子&#xff09;、线圈&#xff08;转子&#xff09;和…

Java双端队列ArrayDeque

概述 双端队列ArrayDeque是Java集合框架中的一种数据结构&#xff0c;它实现了Deque接口&#xff0c;因此支持在两端进行添加和移除元素。通过名称也能看出&#xff0c;ArrayDeque是基于数组实现的&#xff0c;ArrayDeque内部使用一个可动态调整大小的环形数组来存储元素。当Ar…

函数递归(上)

目录 1.递归是什么&#xff1f; 1.1 递归的思想&#xff1a; 2.顺序打印⼀个整数的每⼀位 ​编辑3 迭代 4.求第n个斐波那契数 1.递归是什么&#xff1f; 递归其实是⼀种解决问题的⽅法&#xff0c;在C语⾔中&#xff0c;递归就是函数⾃⼰调⽤⾃⼰。 #include <stdio.h…

【JAVA开源】基于Vue和SpringBoot的购物商城网站

本文项目编号 T 032 &#xff0c;文末自助获取源码 \color{red}{T032&#xff0c;文末自助获取源码} T032&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

鸿蒙OpenHarmony【轻量系统芯片移植案例】标准系统方案之扬帆移植案例

标准系统方案之扬帆移植案例 ​ 本文章是基于瑞芯微RK3399芯片的yangfan开发板&#xff0c;进行标准系统相关功能的移植&#xff0c;主要包括产品配置添加&#xff0c;内核启动、升级&#xff0c;音频ADM化&#xff0c;Camera&#xff0c;TP&#xff0c;LCD&#xff0c;WIFI&a…

高效财税自动化软件如何提升企业财务工作的效率与准确性

在当今企业运营中&#xff0c;财务管理发挥着核心作用。它不仅涉及企业正常运转和市场决策&#xff0c;还是推动企业向高质量发展迈进的关键动力。面对激烈的市场竞争与科技革新的双重挑战&#xff0c;财务管理亟需进行持续的转型与提升&#xff0c;为企业高质量发展目标的实现…

vue2.0+ts注册全局函数和几个递归查找

vue2.0ts注册全局函数和几个递归查找 一、main.ts 一、main.ts // 定义你的全局函数,判断是否有按钮权限 interface Item {label: string;checked: number;[k: string]: any; } // 获取按钮时候权限 function globalLable(arr: Item[], label: string): boolean {for (const i…

为大模型提供服务需要多少 GPU 显存?

在几乎所有的 LLM 面试中&#xff0c;有一个问题总是会被提及&#xff1a;“为大模型提供服务需要多少 GPU 显存&#xff1f;” 这不仅仅是一个随机的问题——它是一个关键指标&#xff0c;反映了你对这些强大模型在生产环境中部署和可扩展性的理解程度。 当你使用 GPT、LLaM…

在QSciscintilla编辑器源码中新增关键词分组的方法

由于项目需要&#xff0c;得在QSciscintilla的底层源码中增加几组关键词分组。在网上找了很久&#xff0c;一般都是说利用重写keywords(int set)接口的方式来增加&#xff0c;但这种方法不适用于我的应用场景。因为这种方法只能增加有限个关键词&#xff0c;且都是直接写死的方…

风电出海内幕:黄金期和内卷期共存

间歇性停战&#xff0c;持续性内卷&#xff0c;这就是中国风电。 9月4日&#xff0c;中国可再生能源学会风能专业委员会秘书长秦海岩发布文章《穿越周期&#xff0c;跨过险阻&#xff0c;中国风电的征途仍是星辰大海》。文章指出&#xff0c;中国风电行业正在重现十多年前的恶…

高中数学:立体几何-空间中点、直线、平面之间的位置关系

文章目录 1、空间中直线与直线的位置关系1、平行线传递性质2、定理3、空间直线夹角 2、空间中直线与平面的位置关系1、线面平行2、线面垂直 3、空间中平面与平面的位置关系1、面面平行2、二面角&#xff08;面与面的夹角&#xff09;3、面面垂直 4、补充 1、空间中直线与直线的…

新手也能快速上手!推荐这四款剪辑软件

在数字媒体日益盛行的今天&#xff0c;视频剪辑软件几乎成为了每一位视频创作者或媒体工作者必备的“十八般武艺”之一&#xff1b;用各种软件对影片、音乐进行精确到秒的剪切和调色&#xff0c;让我深刻体验到其功能的强大与方便&#xff0c;下面就为大家分享一下我在工作中常…

制造企业MES系统委外工单管理探析

一、委外工单管理的重要性 在制造企业的生产过程中&#xff0c;委外工单管理是一项重要且复杂的任务。委外加工是指企业将某些生产任务外包给外部供应商完成&#xff0c;以降低成本、提高效率或满足特定需求。然而&#xff0c;委外加工过程中往往存在诸多不确定性&#xff0c;…

【深度学习】(3)--损失函数

文章目录 损失函数一、L1Loss损失函数1. 定义2. 优缺点3. 应用 二、NLLLoss损失函数1. 定义与原理2. 优点与注意3. 应用 三、MSELoss损失函数1. 定义与原理2. 优点与注意3. 应用 四、BCELoss损失函数1. 定义与原理2. 优点与注意3. 应用 五、CrossEntropyLoss损失函数1. 定义与原…

C++(Qt)软件调试---断点高级用法(20)

C(Qt)软件调试—断点高级用法&#xff08;20&#xff09; 文章目录 C(Qt)软件调试---断点高级用法&#xff08;20&#xff09;[toc]1、概述2、断点高级用法1.1 条件断点1.2 日志断点/记录点/消息追踪点1.3 函数断点1.4 命中次数断点1.5 异常断点1.6 等待断点/触发断点1.7 临时断…

一台 Linux 同时 安装配置多个 python3 环境( 3.7 - 3.12 )

很多粉丝来信说&#xff1a;安装新 python3 环境&#xff0c;要卸载操作系统原来自带的 python。。。 博主再次声明&#xff1a;不需用搞复杂了&#xff0c;相反可以同时具备多个环境&#xff0c;也不需用配置环境变量 无图无真相&#xff0c;且看此图&#xff1a; 详情操作&am…