ElementUI table表格组件实现双击编辑单元格失去焦点还原,支持多单元格

在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态,失去焦点时还原表格显示。
实现思路:

  • 在数据中增加isFocus:false.控制是否显示
  • 在table中用@cell-dblclick双击方法

先看效果:
在这里插入图片描述

上源码:在表格模板中用scope.row.isFocus && focusLabelName=='姓名1控制多个单元格显示

<el-table :data="tableData" border stripe style="width: 100%"  @cell-dblclick="tabClick"><el-table-column prop="date" label="Product Name" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="price" label="姓名1"  width="180"><template slot-scope="scope"><el-input v-if="scope.row.isFocus && focusLabelName=='姓名1'" v-focus size="small" v-model="scope.row.price" @change="changeTrafOrigTaxAmount(scope.row)" @blur="blurInput(scope.row)"></el-input><span v-else>{{scope.row.price}}</span></template></el-table-column><el-table-column prop="price" label="姓名2"  width="180"><template slot-scope="scope"><el-input v-if="scope.row.isFocus && focusLabelName=='姓名2'" v-focus size="small" v-model="scope.row.price2" @change="changeTrafOrigTaxAmount(scope.row)" @blur="blurInput(scope.row)"></el-input><span v-else>{{scope.row.price2}}</span></template></el-table-column>
</el-table>

方法:

data: function () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',price: 1000,price2: 1000,price3: 1000,isTransfer: true,rate: 0.3,amount: 1000,isFocus: false,}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',price: 1000,isTransfer: false,rate: 0.3,amount: 1000,isFocus: false,}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',price: 1000,price2: 1000,price3: 1000,isTransfer: true,rate: 0.3,amount: 1000,isFocus: false,}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',price: 1000,price2: 1000,price3: 1000,isTransfer: false,rate: 0.3,amount: 1000,isFocus: false,}],focusLabelName:''}},methods: {tabClick(row, column, cell, event){console.log(row, column, cell);row.isFocus = true;this.focusLabelName = column.label;},blurInput(row){row.isFocus = false}}

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

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

相关文章

最新Unity游戏主程进阶学习大纲(2个月)

过完年了&#xff0c;很多同学开始重新规划自己的职业方向,找更好的机会,准备升职或加薪。今天给那些工作了1~5年的开发者梳理”游戏开发客户端主程”的学习大纲&#xff0c;帮助大家做好面试准备。适合Unity客户端开发者。进阶主程其实就是从固定的几个方面搭建好完整的知识体…

python编程中模块的调用方法

模块&#xff0c;就是制造大型程序的“零件"。这些零件可以是外购的也可以是“自造”的。它们的使用方法很简单&#xff0c;就是“拿来”——import. “拿来”模块的方法有from***import*** 和import***&#xff0c;宗旨就是“拿来”——import. 对不对&#xff1f;

Vision Transfomer系列第二节---Tricks测试

目录 学习式和固定式位置编码测试dropout的作用测试block深度的作用测试embeding维度大小的作用测试多头的作用测试Overlap Patch的作用 学习式和固定式位置编码测试 主要测试无位置编码\可学习位置编码和固定式位置编码的训练效果: 其中固定式位置编码采用之前博客的正余弦位…

架构设计:数据库扩展

引言 随着业务的发展和用户规模的增长&#xff0c;数据库往往会面临着存储容量不足、性能瓶颈等问题。为了解决这些问题&#xff0c;数据库扩展成为了一种常见的解决方案。在数据库扩展的实践中&#xff0c;有许多不同的策略和技术可供选择&#xff0c;其中包括水平拆分、垂直…

高通 Android 12 Settings不显示版本号问题

1、最近项目遇到一个奇葩问题&#xff0c;编译系统版本号不见了&#xff1f; 2、一开始我想着可能是自己代码没有make clean结果编译几个小时&#xff0c;然后烧录固件发现还是未生效。 3、然后这时候我又去看git log review最近修改也没有太大发现&#xff08;待定&#xff…

介绍 CI / CD

目录 一、介绍 CI / CD 1、为什么要 CI / CD 方法简介 1、持续集成 2、持续交付 3、持续部署 2、GitLab CI / CD简介 3、GitLab CI / CD 的工作原理 4、基本CI / CD工作流程 5、首次设置 GitLab CI / CD 6、GitLab CI / CD功能集 一、介绍 CI / CD 在本文档中&#x…

开源 - 一款可自定义的在线免杀平台|过x60、wd等

免责声明&#xff1a;本工具仅供安全研究和教学目的使用&#xff0c;用户须自行承担因使用该工具而引起的一切法律及相关责任。作者概不对任何法律责任承担责任&#xff0c;且保留随时中止、修改或终止本工具的权利。使用者应当遵循当地法律法规&#xff0c;并理解并同意本声明…

K线实战分析系列之二:伞形线

K线实战分析系列之二&#xff1a;伞形线 一、伞形线二、锤子线三、上吊线四、锤子线和上吊线的特征 一、伞形线 可以是看涨信号&#xff0c;也可以是看跌信号&#xff0c;具体要看它处于趋势的哪个位置 二、锤子线 出现在下行趋势中就叫锤子线锤子线是阳线看涨意义更大一点市…

petalinux_zynq7 驱动DAC以及ADC模块之四:python实现http_api

前文&#xff1a; petalinux_zynq7 C语言驱动DAC以及ADC模块之一&#xff1a;建立IPhttps://blog.csdn.net/qq_27158179/article/details/136234296petalinux_zynq7 C语言驱动DAC以及ADC模块之二&#xff1a;petalinuxhttps://blog.csdn.net/qq_27158179/article/details/1362…

【办公类-16-10-01】“2023下学期 中4班 自主游戏观察记录(python 排班表系列)

背景需求 上学期的周安排里&#xff0c;每班每周的自主游戏会轮到多个不同的内容 因此在每周的自主游戏观察有2次记录&#xff0c;观察的项目可以写不一样的&#xff0c; 如一位老师写沙水游戏&#xff0c;另一位写表演游戏 本学期&#xff0c;中班的自主游戏全部是户外的&am…

ApexRBp在线粒子传感器在电动汽车电池制造的应用

电动汽车电池的崛起与颗粒污染的挑战 随着电动汽车&#xff08;EV&#xff09;市场的迅速扩张&#xff0c;对高性能锂离子电池的需求也急剧增加。这些电池不仅是EV的心脏&#xff0c;更是推动其前行的核心动力。然而&#xff0c;在电池制造的每一个环节&#xff0c;都需要对多…

2024-02-21 作业

作业要求&#xff1a; 复习课上内容 //已完成结构体字节对齐&#xff0c;64位没做完的做完&#xff0c;32位重新都做一遍&#xff0c;课上指定2字节对齐的做一遍&#xff0c;自己验证 //已完成两种验证大小端对齐的代码写一遍复习指针内容 //已完成完善顺序表已写出的…

网络安全笔记总结

IAE引擎 1.深度检测技术--DFI和DPI技术 DFI和DPI都是流量解析技术&#xff0c;对业务的应用、行为及具体信息进行识别&#xff0c;主要应用于流量分析及流量检测。 DPI&#xff1a;深度包检测技术 DPI是一种基于应用层的流量检测和控制技术&#xff0c;对流量进行拆包&#x…

海外媒体发稿:链游媒体宣发推广7种有效策略解析-华媒舍

随着区块链技术的不断发展&#xff0c;链游&#xff08;区块链游戏&#xff09;已经成为了游戏市场中备受瞩目的一部分。仅仅开发出一款出色的链游并不足以成功&#xff0c;而有效的宣发推广策略则是不可或缺的。 本文将介绍7种有效的链游媒体宣发推广策略&#xff0c;帮助您了…

机器视觉【3】非线性求解相机几何参数

线性求解相机几何参数的缺点 上一章节介绍学习了&#xff08;DLT&#xff09;线性求解相机几何参数&#xff0c;了解到线性求解法当中比较明显的缺点&#xff1a; 没有考虑到镜头畸变的影响不能引入更多的约束条件融入到DLT算法当中优化最关键的是&#xff0c;代数距离并不是…

测试环境搭建整套大数据系统(六:搭建sqoop)

一&#xff1a;下载安装包 https://archive.apache.org/dist/sqoop/ 二&#xff1a;解压修改配置。 tar -zxvf sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz -C /opt cd /opt mv sqoop-1.4.7.bin__hadoop-2.6.0/ sqoop-1.4.7修改环境变量 vi /etc/profile#SQOOP_HOME export SQOOP_…

Python 在Word中创建表格并填入数据、图片

在Word中&#xff0c;表格是一个强大的工具&#xff0c;它可以帮助你更好地组织、呈现和分析信息。本文将介绍如何使用Python在Word中创建表格并填入数据、图片&#xff0c;以及设置表格样式等。 Python Word库&#xff1a; 要使用Python在Word中创建或操作表格&#xff0c;需…

Atcoder ABC340 A-D题解

比赛链接:ABC340 话不多说&#xff0c;看题。 Problem A: 签到。 #include <bits/stdc.h> using namespace std; int main(){int a,b,d;cin>>a>>b>>d;for(int ia;i<b;id)cout<<i<<endl;return 0; } Problem B: 还是签到题。一个v…

Neo4j导入数据之JAVA JDBC

目录结构 前言设置neo4j外部访问代码整理maven 依赖java 代码 参考链接 前言 公司需要获取neo4j数据库内容进行数据筛查&#xff0c;neo4j数据库咱也是头一次基础&#xff0c;辛辛苦苦安装好整理了安装neo4j的步骤&#xff0c;如今又遇到数据不知道怎么创建&#xff0c;关关难…

石头剪刀布游戏(C语言)

题目描述 石头剪刀布游戏有 3 种出拳形状&#xff1a;石头、剪刀、布。分别用字母 A , B , C 表示。 游戏规则: 出拳形状之间的胜负规则如下&#xff1a; A > B&#xff1b;B > C&#xff1b;C > A&#xff1b;">"左边一个字母&#xff0c;表示相对优…