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
        }
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nginx缓存相关配置解析

文章目录 前言配置示例proxy_cacheproxy_cache_pathproxy_cache_keyproxy_cache_validproxy_cache_lockproxy_cache_methodsproxy_cache_bypassproxy_no_cacheproxy_cache_min_usesadd_header 可选项 使用示例通过响应头判断是否走缓存 缓存手动删除原博客 前言 客户端需要访问…

10、内网安全-横向移动域控提权NetLogonADCSPACKDC永恒之蓝

用途&#xff1a;个人学习笔记&#xff0c;有所借鉴&#xff0c;欢迎指正&#xff01; 背景&#xff1a; 主要针对内网主机中的 域控提权漏洞&#xff0c;包含漏洞探针和漏洞复现利用。 1、横向移动-系统漏洞-CVE-2017-0146&#xff08;ms17-010&#xff0c;永恒之蓝&#xff0…

如何添加或编辑自定义WordPress侧边栏

WordPress侧边栏是许多WordPress网站上的固定装置。它为您的内容提供了一个垂直空间&#xff0c;您可以在其中帮助读者导航、增加电子邮件列表或社交关注、展示广告等。 因为它是许多WordPress网站不可或缺的一部分&#xff0c;所以我们认为侧边栏值得拥有自己的大型指南。在这…

SpringBootWeb学习笔记——12万字详细总结!

0. 写在前面 注:这套笔记是根据黑马程序员B站2023-3-21的视频学习的成果,其中省略了前端基础部分、Maven部分和数据库基础部分,详情可见目录。 注注:目前文章内结尾处多幅图片加载不出来,因为图片还存在本地没被传上来,过段时间再改~ 所有的Spring项目都基于Spring Fra…

3、windows环境下vscode开发c/c++环境配置(二)

前言&#xff1a;上一篇文章写了windows环境下&#xff0c;配置vscode的c/c开发环境&#xff0c;这一篇讲vscode开发c/c的配置文件&#xff0c;包括c_cpp_propertues.json&#xff0c;task.json及launch.json。 一、总体流程 通过c/c插件我们就可以来编写c/c程序了&#xff0c…

网贷大数据查询多了对征信有影响吗?

网贷大数据在日常的金融借贷中起到很重要的风控作用&#xff0c;不少银行已经将大数据检测作为重要的风控环节。很多人在申贷之前都会提前了解自己的大数据信用情况&#xff0c;那网贷大数据查询多了对征信有影响吗?本文带你一起去看看。 首先要说结论&#xff1a;那就是查询网…

面试经典150题——同构字符串

"Dream big and dare to fail." - Norman Vaughan 1. 题目描述 2. 题目分析与解析 2.1 思路一 看见这个题目的第一反应就是使用一个hash表&#xff0c;用来存储映射关系&#xff0c;具体思路如下&#xff1a; 首先二者要是同构的长度肯定是得相同的&#xff0c;但…

Android 多线程并发优化实现

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、Thread 使用二、Android Thread三.线程优先级 一、Thread 使用 在讲解多线程之前&#xff0c;我们先来讲解Thread使用几个需要注意的点&#xff1a…

Unity UGUI的DrawCall优化

Unity UGUI是一种强大的用户界面设计工具&#xff0c;它可以帮助开发者快速创建各种界面元素&#xff0c;从按钮和文本到滑块和面板等。然而&#xff0c;在使用UGUI时&#xff0c;一个常见的性能瓶颈就是DrawCall过多导致的性能下降。在本文中&#xff0c;我们将深入探讨UGUI的…

集成使用 GitHub Copilot 提升 IDEA 开发效率

集成使用 GitHub Copilot 提升 IDEA 开发效率 在现代软件开发中&#xff0c;集成开发环境&#xff08;IDE&#xff09;如IntelliJ IDEA已经成为开发人员不可或缺的工具。它们提供了代码编辑、调试、版本控制等一系列功能&#xff0c;极大地提高了开发效率。而GitHub Copilot作…

C# Winfrom实例:武汉智能安检闸机数据接收和解析

项目介绍&#xff1a;本实例主要是接收安检闸机的数据解析并显示到界面上&#xff0c;只做功能实现&#xff0c;不做界面美化 硬件&#xff1a;闸机一个、网线一根、电脑主机开发环境&#xff1a;vs2017 系统&#xff1a;win10涵盖知识点&#xff1a;tcp通讯、文件写入、多线程…

《软件方法(下)》8.2.5.2 属性是否直接描述类(202402更新)(2)

导致出现违反本要点的错误的原因有&#xff1a; &#xff08;1&#xff09;缺少抽象能力 缺少抽象能力的建模人员经常会把手上素材的信息&#xff0c;一一对应地映射为类和属性&#xff0c;导致本来属于多个类的信息被合并在一个类中。 如图8-63&#xff0c;建模人员对照着一…

ETL、ELT区别以及如何正确运用

一、 浅谈ETL、ELT ETL与ELT的概念 ETL (Extract, Transform, Load) 是一种数据集成过程&#xff0c;通常用于将数据从一个或多个源系统抽取出来&#xff0c;经过清洗、转换等处理后&#xff0c;加载到目标数据存储中。这种方法适用于需要对数据进行加工和整合后再加载到目标…

Django学习笔记-HTML实现MySQL的图片上传

1.django项目编写index.html代码 创建form表单,路由指向upload,请求方式post,enctype设置"multipart/form-data", post请求添加{% csrf_token %},编写两个input,上传和提交 2.添加upload路由 3.views中创建upload 1).获取上传的文件,没有上传则返回"没有指定…

打码半年,开源一款自定义大屏设计软件!

hi&#xff0c;大家好&#xff0c;我是Tduck马马。 最近我们开源了一款大屏软件-TReport&#xff0c;与大家分享。 TReport是一款基于Vue3技术栈的数据可视化系统&#xff0c;支持静态、动态api等数据源&#xff1b;可用于数据可视化分析、报表分析、海报设计使用。 提供自定…

Stable Diffusion 绘画入门教程(webui)-图生图

通过之前的文章相信大家对文生图已经不陌生了&#xff0c;那么图生图是干啥的呢&#xff1f; 简单理解就是根据我们给出的图片做为参考进行生成图片。 一、能干啥 这里举两个例子 1、二次元头像 真人转二次元&#xff0c;或者二次元转真人都行&#xff0c; 下图为真人转二次…

.net6 webapi log4net完整配置使用流程

前置&#xff1a;为项目安装如下两个依赖 1.创建文件夹cfgFile 2.创建log4net.Config <?xml version"1.0" encoding"utf-8" ?> <log4net><appender name"ConsoleAppender" type"log4net.Appender.ConsoleAppender"…

使用备份工具xtrabackup进行差异备份详细讲解

差异备份 基于第一天进行差异备份 删除之前修改的数据备份 [rootservice ~]# rm -rf /data/backup/* [rootservice ~]# ls /data/backup 完整备份 [rootservice ~]# xtrabackup --defaults-file/etc/my.cnf --backup --target-dir/data/backup/base/ -uroot -pWyxbuke00. -H…

Collection集合体系(ArrayList,LinekdList,HashSet,LinkedHashSet,TreeSet,Collections)

目录 一.Collection 二.List集合 三.ArrayList集合 四.LinkedList集合 五.Set集合 六.hashSet集合 七.LinkedHashSet集合 八.TreeSet集合 九.集合工具类Collections 集合体系概述 单列集合&#xff1a;Collection代表单列集合&#xff0c;每个元素&#…

大白话说说Docker容器默认网络模型工作原理

Docker的默认网络模型 —— 桥接模式&#xff08;Bridge&#xff09; 当你不做任何特殊设置时&#xff0c;Docker会使用一种叫做“桥接模式”的网络设置。这就像是给你的容器小房子安装了一个虚拟的桥接网络。这座桥连接着容器和你的电脑&#xff08;宿主机&#xff09;&#…