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

news/2024/9/23 0:40:43/

每一行都独立

在这里插入图片描述

<el-table-column label="操作" width="220" fixed="right"><template #default="{ row, $index }"><el-buttonv-if="!row.tableEditFlag"type="primary"size="small"@click="startEdit($index,row.id)">编辑</el-button><template v-else><el-buttontype="success"size="small"@click="saveEdit($index,row.id)">保存</el-button><el-buttontype="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.ppmy.cn/news/1529079.html

相关文章

python 异步读取文件,速度变快了吗

“python 异步读取文件&#xff0c;速度变快了吗” 当我问出这个问题&#xff0c;大部分人第一反应应该是python新人&#xff0c;不懂异步 首先说一下我对异步的理解&#xff1a; asyncio 是 gevent greenlet 的组合gevent 底层使用了libev、selectors 模块&#xff0c;这两…

JAVA基础:正则表达式,String的intern方法,StringBuilder可变字符串特点与应用,+连接字符串特点

1 String中的常用方法2 1.1 split方法 将字符串按照指定的内容进行分割&#xff0c;将分割成的每一个子部分组成一个数组 分割内容不会出现在数组中 实际上该方法不是按照指定的简单的符号进行分割的&#xff0c;而是按照正则表达式进行分割 1.2 正则表达式 用简单的符号组合…

SVM原理

SVM 这里由于过了很长时间 博主当时因为兴趣了解了下 博主现在把以前的知识放到博客上 作为以前的学习的一个结束 这些东西来自其他资料上 小伙伴看不懂英文的自行去翻译下吧 博主就偷个懒了 多维空间和低维空间 不一样的分法&#xff0c;将数据映射到高维 &…

Rasa对话模型——做一个语言助手

1、Rasa模型 1.1 模型介绍 Rasa是一个用于构建对话 AI 的开源框架&#xff0c;主要用于开发聊天机器人和语音助手。Rasa 提供了自然语言理解&#xff08;NLU&#xff09;和对话管理&#xff08;DM&#xff09;功能&#xff0c;使开发者能够创建智能、交互式的对话系统。 1.2…

PostgreSQL 的 logger 进程和 Oracle 的 diag 进程对比

PostgreSQL 的 logger 进程和 Oracle 的 diag 进程对比 PostgreSQL 和 Oracle 数据库在日志记录和诊断进程这方面各自有自己的实现方式&#xff0c;但是目的都是类似的&#xff1a;记录和诊断数据库系统的运行状态、错误和其他重要事件。以下是对 PostgreSQL 的 logger 进程和…

大语言模型应用的业务架构点

背景 在国内某小龙干了一段时间了&#xff0c;困于时间、资本、人力等等原因&#xff0c;其实应用在工程侧的业务架构建模并没有做好。但是&#xff0c;随着业务迭代和读论文&#xff0c;对于大语言模型的应用&#xff08;自认为&#xff09;有一定的认知了&#xff0c;那么业…

828华为云征文 | 云服务器Flexus X实例:one-api 部署,支持众多大模型

目录 一、one-api 介绍 二、部署 one-api 2.1 拉取镜像 2.2 部署 one-api 三、运行 one-api 3.1 添加规则 3.2 运行 one-api 四、添加大模型 API 4.1 添加大模型 API 五、总结 本文通过 Flexus云服务器X实例 部署 one-api。Flexus云服务器X实例是新一代面向中小企业…

基于Jeecg-boot开发系统--后端篇

背景 Jeecg-boot是一个后台管理系统&#xff0c;其提供能很多基础的功能&#xff0c;我希望在不修改jeecg-boot代码的前提下增加自己的功能。经过几天的折腾终于搞定了。 首先是基于jeecg-boot微服务的方式来扩展的&#xff0c;jeecg-boot微服务本身的搭建过程就不讲了&#x…