Vue3与Element-plus配合 直接修改表格中的一项数据——控制输入框的显示与隐藏

 利用控制与隐藏输入框,直接修改表格中的每一项数据。

<!-- 表格模块 -->
<div><el-table :data="tablelist" style="width: 100%"><el-table-column align="center" prop="deposit" label="接单押金"><template #default="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.deposit }}</span><div v-else style="margin-left: 200px; width: 100px"><el-input v-model="row.deposit" placeholder="请输入分类名"></el-input></div> </template></el-table-column><el-table-column align="center" label="操作"><template #default="{ row, $index }"><!-- 编辑 --><el-buttonv-if="!showEdit[$index]"type="primary"@click="Edit(row, $index)"plain>编辑</el-button><!-- 编辑确认 --><el-button v-else type="primary" @click="sure(row, $index)" plain>确认</el-button></template></el-table-column></el-table>
</div>
// #region *****************点击编辑控制输入框显示与关闭模块****************
const showEdit = ref<boolean[]>([])
// 编辑处理
const Edit = (row: any, index: any) => {//vue3使用数组添加数据showEdit.value[index] = true
}
// #endregion
// #region *****************确认编辑模块****************
const sure = async (row: any, index: any) => {console.log(row)showEdit.value[index] = false// 表单预校验// await form.value.validate()// 发起修改请求// await updatePageClassServe(row).then(() => {//     ElMessage.success('修改成功!')//     showEdit.value = []// })// 重新获取分类数据,渲染页面// getChannelList()
}
// #endregion

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【 C++ 】 一文搞定——引用、内联、命名空间、缺省、重载

前言&#xff1a;这篇文章将带您了解C基础中的知识点——命名空间、引用、内联、缺省、重载 &#x1f618;我的主页&#xff1a;OMGmyhair-CSDN博客 一、命名空间namespace 1.可以嵌套定义&#xff0c;但是只能定义在全局 namespace ly {int student 1;int age 21;void Pr…

windows wsl ubuntu系统安装桌面可视化

参考&#xff1a; https://www.bilibili.com/read/cv33557374/ 1&#xff09;首先先安装好wsl ubuntu系统 2&#xff09;安装 Ubuntu 桌面版 sudo apt purge -y acpid acpi-support modemmanagersudo apt-mark hold acpid acpi-support modemmanager sudo apt install ubunt…

数据库连接断开后,DBAPI的数据源如何自动重连

现象 在使用DBAPI的过程中&#xff0c;如果网络抖动导致数据库连接不上&#xff0c;发现DBAPI的数据源不能重连&#xff0c;必须重启DBAPI才能连上数据库 解决办法 在数据源的连接池参数配置druid.breakAfterAcquireFailurefalse注意在企业版的4.1.1及以上版本才可以配置连接…

捉虫笔记(1)之 WinDbg符号配置

WinDbg符号配置 1、WinDbg简单介绍 WinDbg 是微软的一款强大的调试工具&#xff0c;用于 Windows 平台的内核和用户模式调试。它提供了一系列强大的功能&#xff0c;包括内存和寄存器的查看、断点设置、堆栈跟踪、性能分析等。 WinDbg 的历史可以追溯到微软早期的调试工具&a…

OceanBase v4.2 特性解析:如何实现表级恢复

背景 在某些情况下&#xff0c;你可能会因为误操作而遇到表数据损坏或误删表的情况。为了能在事后将表数据恢复到某个特定时间点&#xff0c;在OceanBase尚未有表级恢复功能之前&#xff0c;你需要进行以下步骤&#xff1a; 利用OceanBase提供的物理恢复工具&#xff0c;您可…

ESP8266用AT指令实现连接MQTT

1准备工作 硬件&#xff08;ESP8266&#xff09;连接电脑 硬件已经烧入了MQTT透传固件 2实现连接 2-1&#xff08;进入AT模式&#xff09; 打开串口助手发送如下指令 AT 2-2&#xff08;复位&#xff09; ATRST 2-3&#xff08;开启DHCP&#xff0c;自动获取IP&#x…

Java二十三种设计模式-代理模式模式(8/23)

代理模式&#xff1a;为对象访问提供灵活的控制 引言 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它为其他对象提供一个代替或占位符&#xff0c;以控制对它的访问。 基础知识&#xff0c;java设计模式总体来说设计模式分为三大类&#…

基于 HTML+ECharts 实现智慧运维数据可视化大屏(含源码)

智慧运维数据可视化大屏&#xff1a;基于 HTML 和 ECharts 的实现 在现代企业中&#xff0c;运维管理是确保系统稳定运行的关键环节。随着数据量的激增&#xff0c;如何高效地监控和分析运维数据成为了一个重要课题。本文将介绍如何利用 HTML 和 ECharts 实现一个智慧运维数据可…

14、如何⽤DDD设计微服务代码模型

在完成领域模型设计后&#xff0c;接下来我们就可以开始微服务的设计和 落地了。在微服务落地前&#xff0c;⾸先要确定微服务的代码结构&#xff0c;也就是我 下⾯要讲的微服务代码模型。 只有建⽴了标准的微服务代码模型和代码规范后&#xff0c;我们才可以将 领域对象映射到…

【Rust】所有权OwnerShip

什么是所有权 rust使用由编译器检查的一些规则构成的所有权系统来管理内存。且这不会影响程序的运行效率。 所有权规则 rust中每一个每一个值都有一个owner。在同一时刻&#xff0c;只能有一个owner。当这个owner超过范围&#xff0c;则该值会被丢弃。 String类型 为什么需…

全链路追踪 性能监控,GO 应用可观测全面升级

作者&#xff1a;古琦 01 介绍 随着 Kubernetes 和容器化技术的普及&#xff0c;Go 语言不仅在云原生基础组件领域广泛应用&#xff0c;也在各类业务场景中占据了重要地位。如今&#xff0c;越来越多的新兴业务选择 Golang 作为首选编程语言。得益于丰富的 RPC 框架&#xff…

虚拟机centos9搭建wordpress

目录 1. 更换yum源更新系统软件包&#xff1a; 1.1备份yum源 1.1.1创建备份目录&#xff1a; 1.1.2移动现有仓库配置文件到备份目录&#xff1a; 1.1.3验证备份&#xff1a; 1.2更换yum源 1.2.1添加yum源 1.2.2删除和建立yum缓存 1.3更新系统软件包 1.4 yum与dnf介绍…

单元测试的最佳实践

整体架构 合适的架构可以提升可测试性。比如菱形对称架构的模块化和解耦特性使得系统各个部分可以独立进行单元测试。这不仅提高了测试的效率&#xff0c;还能够减少测试的依赖性&#xff0c;提高测试准确性。 代码设计 代码设计和可测试性有密切关联。强烈建议一个方法的代码行…

Docker 安全及日志管理(包含SSL证书)

目录 一、Docker 存在的安全问题 二、Docker 架构缺陷与安全机制 三、Docker 安全基线标准 四、容器相关的常用安全配置方法 五、限制流量流向 六、镜像安全 七、DockerClient 端与 DockerDaemon 的通信安全 https的单向认证流程 https的双向认证流程 八、DockerClie…

Qt 使用视口和窗口作图

物理坐标系与逻辑坐标系 绘图设备的物理坐标系是基本的坐标系&#xff0c;通过 QPainter 的平移、旋转等坐标变换可以得到更容 易操作的逻辑坐标系。 物理坐标系也称为视口&#xff08;viewport&#xff09;坐标系&#xff0c;逻辑坐标系也称为窗口&#xff08; window&…

USB转多路串口-纯硬件实现串口数据传输指示灯电路

前言 串口相关产品往往要求有数据收发时LED闪烁&#xff0c;我们经常会用软件实现&#xff0c;在MCU内注册一个定时器&#xff0c;有数据发送时就闪烁一段时间。软件点灯这种方式存在两个缺陷&#xff0c;一是接收方向不好实现&#xff1b;二是定时器一般用固定频率&#xff0…

谷粒商城实战笔记-63-商品服务-API-品牌管理-OSS获取服务端签名

文章目录 一&#xff0c;创建第三方服务模块thrid-party1&#xff0c;创建一个名为gulimall-third-party的模块2&#xff0c;nacos上创建third-party命名空间&#xff0c;用来管理这个服务的所有配置3&#xff0c;配置pom文件4&#xff0c;配置文件5&#xff0c;单元测试6&…

Selenium 的使用

selenium 是一个自动化测试工具&#xff0c;利用它可以驱动浏览器完成特定的操作&#xff0c;例如点击&#xff0c;下拉等&#xff0c;还可以获取浏览器当前呈现的页面的源代码&#xff0c;做到所见即所爬&#xff0c;对于一些 JavaScript 动态渲染的界面来说&#xff0c;这种爬…

封装和桥接Unity 协程体系

简介 协程&#xff08;Coroutine&#xff09;在C#中是一种特殊的函数&#xff0c;它允许开发者编写可以暂停执行并在未来某个时刻恢复执行的代码块。协程通常用于实现异步操作&#xff0c;如延时执行、等待某个事件发生、或者分段执行复杂的任务。在Unity游戏引擎中&#xff0c…

算法之递归算法

递归是非常常见的一种算法&#xff0c; 也比较难以理解&#xff0c;简而言之&#xff0c;递归就是写了一个方法&#xff0c;方法中还调用了该方法&#xff0c;相当于自己调用自己&#xff0c;如果书写不当&#xff0c;就会有堆栈溢出的风险&#xff0c;无法跳出。 所以我们编写…