vue3点击表格某个单元格文本就切换成输入框,其他单元格不变化

<el-table :data="data.tableData" height="60vh" border scrollbar-aways-on><el-table-column label="序号" type="index" width="80" fixed /><el-table-column label="操作" width="120" fixed><template #default="{ row }"><el-button type="danger" text @click="deleteBtn(row)" :disabled="row.status">删除</el-button><el-button style="color: #3592FF" text @click="enableBtn(row)">{{ row.status ? '停用' : '启用' }}</el-button></template></el-table-column><el-table-column prop="status" label="状态" width="120" /><el-table-column prop="phone" label="手机号" /><el-table-column prop="kanno" label="操作人" /><el-table-column prop="kanno" label="操作时间" /><el-table-column prop="kanno" label="创建人" /><el-table-column prop="createTime" label="创建时间" /><el-table-column label="姓名"><template #default="scope"><template v-if="scope.cellIndex == cellIndex && scope.$index == index"><el-input v-model="scope.row.status" @blur="saveCell" /></template><template v-else><div @click="editCell(scope, scope.$index)">{{ scope.row.status }}</div></template></template></el-table-column></el-table>
const cellIndex = ref('')
const index = ref('')function editCell(row, ind) {cellIndex.value = row.cellIndexindex.value = ind
}
function saveCell() {cellIndex.value = ''index.value = ''
}

效果如下

点击第一行的文本

点击第二行文本

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

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

相关文章

【c++】简单了解运算符重载

引例 class Integer{ public:Integer(int num):_num(num){}int& getValue(){return _num;} private:int _num; };现在有两个Integer对象a,b。想让a和b相加得到的结果给对象c&#xff0c;现在可以肯定的是cab编译后肯定会报错 请注意这条信息no match for operator (oper…

【Spring Boot 源码学习】HttpEncodingAutoConfiguration 详解

Spring Boot 源码学习系列 HttpEncodingAutoConfiguration 详解 引言往期内容主要内容1. CharacterEncodingFilter2. HttpEncodingAutoConfiguration2.1 加载自动配置组件2.2 过滤自动配置组件2.2.1 涉及注解2.2.2 characterEncodingFilter 方法2.2.3 localeCharsetMappingsCus…

会声会影2024有哪些新功能?好不好用

比如会声会影视频编辑软件&#xff0c;既加入光影、动态特效的滤镜效果&#xff0c;也提供了与色彩调整相关的LUT配置文件滤镜&#xff0c;可选择性大&#xff0c;运用起来更显灵活。会声会影在用户的陪伴下走过20余载&#xff0c;经过上百个版本的优化迭代&#xff0c;已将操作…

html列表

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>列表名称</title> </head> <body> <!--有序列表--> <ol><li>java</li><li>python</li><li…

centos 7.9 源码安装htop

1.下载源码 wget http://sourceforge.net/projects/htop/files/latest/download 2.上传到tmp目录&#xff0c;并解压 tar xvzf htop-1.0.2.tar.gz mv htop-1.0.2 /opt/ 进入到 cd /opt/htop-1.0.2/ 3.编译并安装 ./configure && make && make install 4.…

Ubuntu docker安装mysql

本文介绍如何在docker中安装mysql&#xff0c;之前有尝试过先在docker中安装一个ubuntu到镜像&#xff0c;然后进去再去安装mysql相关的东西&#xff0c;发现不行&#xff0c;这边整理一下一个可行的方式。 在下载镜像的时候&#xff0c;直接下载mysql镜像。 1.搜索镜像 doc…

redis怎么设计一个高性能hash表

问题 redis 怎么解决的hash冲突问题 &#xff1f;redis 对于扩容rehash有什么优秀的设计&#xff1f; hash 目标是解决hash冲突&#xff0c;那什么是hash冲突呢&#xff1f; 实际上&#xff0c;一个最简单的 Hash 表就是一个数组&#xff0c;数组里的每个元素是一个哈希桶&…

实现Linux下Word转PDF、Java调用命令方式

使用 LibreOffice 实现 Word 转 PDF 和 Java 调用命令 1、 安装 LibreOffice 外网安装 # 一键安装 yum install -y libreoffice # 验证版本 libreoffice --version # Warning: -version is deprecated. Use --version instead. # LibreOffice 7.5.6.2 f654817fb68d6d4600d7…

蓝桥杯 (年号字串 C++)

思路&#xff1a; 1、看成10进制转化成26进制 。 2、A表示1、B表示2。以此类推&#xff0c;Z表示26. 代码&#xff1a; #include <iostream> using namespace std; int main() {char str[10]; int sum 2019, n, i 0; while (sum > 0) {str[i] sum % 26 64;sum / …

Java面试——RPC协议

涉及到分布式方面知识的话&#xff0c;RPC协议是逃不开的&#xff0c;所以在此记录一下RPC协议。 什么是RPC协议 RPC协议&#xff08;Remote Procedure Call&#xff09;远程过程调用&#xff0c;简单的来说&#xff1a;RPC协议是一种通过网络从远程计算机程序获取服务的协议…

【Qt】消息机制和事件

文章目录 事件event()事件过滤器案例&#xff1a;检测鼠标事件案例&#xff1a;定时器 事件 事件&#xff08;event&#xff09;是由系统或者 Qt 本身在不同的时刻发出的。当用户按下鼠标、敲下键盘&#xff0c;或者是窗口需要重新绘制的时候&#xff0c;都会发出一个相应的事…

序列解包和生成器表达式

序列解包 可以使用序列解包功能对多个变量同时赋值 (1) x, y, z 1, 2, 3 print(x, y, z)必须一一对应 x, y, z 1, 2 会抛出异常 (2) 括号可加可不加 v_tuple (False, 3.5, abc) (x, y, z) v_tuple # 等价于x, y, z v_tuple print(x, y, z)可以对range对象进行解包 …

联邦学习的梯度重构

梯度泄露的攻击方法&#xff1a;深度泄露梯度&#xff08;DLG&#xff09;——>在高度压缩的场景下是失效的 原因&#xff1a;梯度压缩&#xff08;可减小通信开销&#xff09;——>存在信息损失<——从而DLG方法效果有限 但是这本身存在的信息损失怎么解决呢&#x…

深入解析docker内核网桥

今天做虚拟桌面&#xff0c;朋友问我&#xff0c;为什么vnc 连接另一个docker 容器一直超时&#xff0c;原因是在docker 启动的时候没有组网&#xff0c;那么接下来我就要解析下docker的内核网络。 我们思考几个问题&#xff0c;带你了解linux 中docker 网络实现的基本原理。 文…

【Java基础面试四十六】、 List<? super T>和List<? extends T>有什么区别?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;问题 参考答案&#x…

计算机算法分析与设计(15)---贪心算法(虚拟汽车加油问题和最优分解问题)

文章目录 一、虚拟汽车加油问题1.1 问题描述1.2 思路分析1.3 代码编写 二、最优分解问题2.1 问题描述2.2 思路分析2.3 代码编写 一、虚拟汽车加油问题 1.1 问题描述 一辆虚拟汽车加满油后可行驶 n n n km。旅途中有若干加油站。设计一个有效算法&#xff0c;指出应在哪些加油…

MyBatisPlus实现连表操作、批量处理

1、实现连表查询 正常来说单靠mybatisplus无法实现连表查询&#xff0c;只能靠单表sql然后进行拼接形成连表查询&#xff0c;或者使用xml文件去编写sql语句来实现连表查询。但他又给我们提供了一个插件MyBatis-Plus-Join&#xff0c;用来弥补mybatisplus再连表上的不足&#…

Apache Jmeter测压工具快速入门

Jmeter测压工具快速入门 一、Jmeter介绍二、Jmeter On Mac2.1 下载2.2 安装2.2.1 环境配置2.2.2 初始化设置 2.3 测试2.3.1 创建JDBC Connection Configuration2.3.2 创建线程组2.3.3 创建JDBC Request2.3.4 创建结果监控2.3.5 运行结果 2.4 问题记录2.4.1 VM option UseG1GC异…

【C语言】每日一题(旋转数组)

旋转数组&#xff0c;链接奉上 目录 方法:创建额外的数组&#xff1a;整体思路&#xff1a;代码实现&#xff1a; 数组反转&#xff1a;整体思路&#xff1a;代码实现&#xff1a;小插曲&#xff1a; 方法: 创建额外的数组&#xff1a; 整体思路&#xff1a; 创建一个额外的…

oracle实现搜索不区分大小写

<if test"code ! null and code ! ">and upper(code) like upper(%${code}%) </if>关键字upper