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

news2024/10/7 20:27:26

在使用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.coloradmin.cn/o/1459988.html

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

相关文章

【Linux】主机搭建 Linux服务器环境 笔记

目录 前言选择系统软件1. 用U盘装系统2. 安装 Centos7.93. 网络套件 应用软件1. ngnix2. 防火墙配置3. nodejs 后记 前言 过年买了个 mini 主机当玩具玩一下&#xff0c;这里记录下。 选择 已有主力机 (windows) 的情况下&#xff0c;使用过如下四种 Linux宿主环境。这里总…

数据结构-邻接链表

介绍 邻接矩阵是运用较多的一种储存图的方法&#xff0c;但如果一张网图边数较少&#xff0c;就会出现二维矩阵中大部分数据为0的情况&#xff0c;浪费储存空间 为了避免空间浪费&#xff0c;也可以采用数组与链表结合的方式来存储图 假设有这样一张图 我们可以先用一个数组…

关于本地docker启动xxl-job

之前通过github拉取xxl-job到本地启动&#xff0c;已经验证完了&#xff0c;主要要记住以下几个步骤: 1.拉取代码 GitHub地址&#xff1a;https://github.com/xuxueli/xxl-job Gitee地址&#xff1a;https://gitee.com/xuxueli0323/xxl-job 2.idea打开&#xff0c;找到tabl…

鸿蒙Next怎么升级,有便捷的方法?

早在2023年11月&#xff0c;市场上有自媒体博主表示&#xff0c;华为HarmonyOS NEXT的升级计划是2X年底到2X年初完成一亿部&#xff0c;2X年底完成三亿部。虽然该博主没有明确具体年份&#xff0c;但预计是2024年底2025年初升级一亿部HarmonyOS NEXT设备&#xff0c;2025年底完…

java数据结构与算法刷题-----LeetCode503. 下一个更大元素 II

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 解题思路&#xff1a;时间复杂度和空间复杂度都是O(n) 此题是739题的衍生题…

2.19C语言学习

关于memset和0x3f int a[100]; memset(a,0x3f,sizeof(a) ); 0x3f0011 111163 C中int型变量所占的位数为4个字节&#xff0c;即32位 0x3f显然不是int型变量中单个字节的最大值&#xff0c;应该是0x7f0111 1111 B 那为什么要赋值0x3f&#xff1a; 作为无穷大使用 因为4个字节均…

python在flask中的请求数据“无限流”

文章目录 一、问题描述二、解决方案 一、问题描述 在flask请求中&#xff0c;有个需求是让调用方一直调接口&#xff0c;并立马返回&#xff0c;而接口方缓存请求&#xff0c;依次执行。 二、解决方案 from flask import Flask, request, jsonify from queue import Queue i…

找到包含两/三个平面坐标点的椭圆点集

直接上代码 import numpy as np def fit_ellipse(points:np.array None, extension_ratio: float 0.2, eccentricity: float 0.8, n_points: int 100):center np.mean(points, axis0)if points.shape[0] 2:axis_vector points[1] - points[0]distance np.linalg.norm(…

K8s ingress-nginx根据请求目录不同将请求转发到不同应用

K8s ingress-nginx根据请求目录不同将请求转发到不同应用 1. 起因 有小伙伴做实验想要实现以下需求: 输入www.pana.com/app1访问app1的svc 输入www.pana.com/app2访问app2的svc 2. 实验 2.1 Dockerfile 先准备Dockerfile FROM nginx:1.20ADD index.html /usr/share/ngin…

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

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

Sora给中国AI带来的真实变化

OpenAI的最新技术成果——文生视频模型Sora&#xff0c;在春节假期炸裂登场&#xff0c;令海内外的AI从业者、投资人彻夜难眠。 如果你还没有关注到这个新闻&#xff0c;简单介绍一下&#xff1a;Sora是OpenAI使用超大规模视频数据&#xff0c;训练出的一个通用视觉模型&#x…

搜索中关于稀疏检索和稠密向量检索的召回效果比较

不同检索方式说明 最近在做搜索召回提升相关的研究工作。对比了稀疏检索和稠密向量检索的效果。其中使用的搜索引擎为elasticsearch8.x版本。稀疏检索包括BM25的检索方式&#xff0c;以及es官方在8.8之后版本提供的稀疏向量模型的方式。稠密向量检索&#xff0c;是指借助机器学…

OAuth2.0 最简向导

本文是一篇关于OAuth2.0的启蒙教程&#xff0c;图文并茂&#xff0c;通俗易懂&#xff0c;力求用最简洁明了的方式向初学者解释OAuth2.0是什么。本文并不是冗杂难懂的长篇大论&#xff0c;一图胜千言&#xff0c;深入浅出OAuth2.0&#xff0c;知其然知其所以然。 参考文献 首…

python OpenCV:seamlessClone泊松融合

一、seamlessClone函数的用法 翻译 https://www.learnopencv.com/seamless-cloning-using-opencv-python-cpp/ def seamlessClone(src, dst, mask, p, flags, blendNone): # real signature unknown; restored from __doc__"""seamlessClone(src, dst, mask, …

使用C# Net6连接国产达梦数据库记录

达梦官网&#xff1a;http://www.dameng.com/ 1 下载达梦并进行安装 下载地址&#xff1a;官网首页——服务与合作——下载中心&#xff08;https://www.dameng.com/list_103.html&#xff09; 根据需要自行下载需要的版本&#xff0c;测试版本为&#xff1a;x86 win64 DM8版…

python3 flask 实现对config.yaml文件的内容的增删改查,并重启服务

config.yaml配置文件内容 功能就是userpass下的用户名和密码做增删改查&#xff0c;并重启hy2服务 auth:type: userpassuserpass:csdn: csdnlisten: :443 masquerade:proxy:rewriteHost: trueurl: https://www.bing.com/type: proxy tls:cert: /root/hyst*****马赛克******er…

先进电机技术——步进电机与伺服电机

一、步进电机 步进电机是一种特殊类型的电动机&#xff0c;它的工作方式是将输入的电脉冲信号转换成精确的机械运动——通常是转子的角位移或直线移动。每接收到一个电脉冲信号&#xff0c;步进电机内部的定子绕组按顺序通电&#xff0c;产生磁场变化&#xff0c;使得与之相互…

基于物联网智慧公厕的多功能城市智慧驿站

在现代城市发展中&#xff0c;智慧化已经成为了一个不可或缺的趋势。而多功能城市智慧驿站&#xff0c;作为智慧城市建设的一部分&#xff0c;以物联网智慧公厕为基础&#xff0c;集合了诸多功能于一身&#xff0c;成为了城市中不容忽视的存在。多功能城市智慧驿站也称为轻松的…

复高斯分布的随机变量的模方的分布

文章目录 复高斯分布的随机变量的模方的分布问题的源头矩阵服从复高斯分布向量服从复高斯分布 复高斯分布的随机变量的模方的分布 已知 X ∼ C N ( μ , Σ ) X \sim \mathcal{C N}(\boldsymbol{\mu}, \boldsymbol{\Sigma}) X∼CN(μ,Σ) 则 ∥ X ∥ 2 \|X\|^2 ∥X∥2的分布为…

c编译器学习04:chibicc的commits记录说明及所有代码的压缩包

整理commits记录的出发点 似乎没有更好的方法去学习代码。 最终决定听作者的建议&#xff0c;按照commits记录去看代码。 https://github.com/rui314/chibicc 页面316个commits实际对应295个版本&#xff0c;估计是有几个含有多次bug修正。 commits记录表格(图) commits记录…