el-table 动态添加删除 -- 鼠标移入移出显隐删除图标

news2024/9/22 13:46:40

 

 <el-table class="list-box" 
    :data="replaceDataList" border>
     <el-table-column label="原始值" prop="original" align="center" >
        <template slot-scope="scope">
           <div @mouseenter="showClickIcon = scope.$index" @mouseleave="showClickIcon = null">
               <el-input style="width:80%" v-model="scope.row.original" placeholder="输入原值" />
           </div>
        </template>
     </el-table-column>
     <el-table-column label="替换为" prop="replace" align="center" >
          <template slot-scope="scope">
            <div @mouseenter="showClickIcon = scope.$index" @mouseleave="showClickIcon = null">
                <div style="display:inline-block;width:80%" >
                    <el-input v-model="scope.row.replace" placeholder="输入替换值" />
                </div>
                <span v-if="showClickIcon == scope.$index" style="margin-left:10px">
                   <i @click="delRow(scope.$index)" class="el-icon-delete"></i>
                </span>
            </div>
         </template>
    </el-table-column>
</el-table>


<div class="addclass">
    <span @click="addRow">+ 添加</span>
</div>
// 增加一行
addRow() {
  const row = {
      original: '',
      replace: '',
  };
  this.replaceDataList.push(row);
},
// 删除指定行
delRow(index) {
   this.replaceDataList.splice(index, 1);
},

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

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

相关文章

电脑如何重新分盘——保姆级教程

方法一&#xff1a; 通过此电脑&#xff0c;鼠标右键点击此电脑&#xff0c;点击管理 点击磁盘管理进入 二&#xff0c;磁盘分区 我这里选择的是“磁盘0”的C盘进行操作&#xff0c;一般新电脑拿到手的时候都处于这么一个状态&#xff0c;只有一个磁盘分区。现在我要把C盘拆分…

翻译语音识别在线的软件,分享4款实用的软件!

在全球化日益加速的今天&#xff0c;语言沟通已成为人们生活中不可或缺的一部分。无论是商务洽谈、学术交流还是日常交流&#xff0c;翻译语音识别技术都扮演着举足轻重的角色。今天&#xff0c;我们就来揭秘一下&#xff0c;那些能让你在语言沟通中如虎添翼的翻译语音识别软件…

LCM通讯的使用

本文主要介绍LCM通讯的基本使用&#xff0c;内容主要整理自官网 https://lcm-proj.github.io/lcm/index.html LCM&#xff0c;即Library for Communication and Marshalling&#xff0c;是一组用于消息传递与数据封装的库和工具&#xff0c;它主要的面向对象是要求高带宽、低延…

[Elasticsearch]ES近似实时搜索的原因|ES非实时搜索的原因|ES Near real-time search

Elasticsearch-专栏&#x1f448;️ 往期回顾&#xff1a; ES单一查询定义&#x1f448;️ ES深分页问题&#x1f448;️ ES商城搜索实战&#x1f448;️ ES环境搭建:单节点模式/集群模式&#x1f448;️ ES开启认证&#x1f448;️ 近似实时搜索&#xff08;Near real-t…

稀疏辅助信号平滑方法在一维信号降噪和旋转机械故障诊断中的应用(MATLAB)

基于形态成分分析理论&#xff08;MCA&#xff09;的稀疏辅助信号分解方法是由信号的形态多样性来分解信号中添加性的混合信号成分&#xff0c;它最早被应用在图像处理领域&#xff0c;后来被引入到一维信号的处理中。在基于MCA稀疏辅助的信号分析模型中&#xff0c;总变差方法…

自定义“请求头”

请求头是HTTP请求的重要部分&#xff0c;可以用“头部字典”按需定制请求头。 (笔记模板由python脚本于2024年07月12日 19:28:44创建&#xff0c;本篇笔记适合喜欢钻研web知识点的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free…

JavaDS —— 栈 Stack 和 队列 Queue

栈的概念 栈是一种先进后出的线性表&#xff0c;只允许在固定的一端进行插入和删除操作。 进行插入和删除操作的一端被称为栈顶&#xff0c;另一端被称为栈底 栈的插入操作叫做进栈/压栈/入栈 栈的删除操作叫做出栈 现实生活中栈的例子&#xff1a; 栈的模拟实现 下面是Jav…

mysql和oracle数据库的备份和迁移

本文主要讲述了mysql数据库的备份和迁移&#xff1b;oracle的肯定是备份和数据迁移&#xff0c;同时介绍了linux的定时任务。 一、mysql Docker容器下mysql备份方法 1、数据库备份 # 进入容器docker exec -it 《containerId容器id》 /bin/bash# mysqldump命令备份并生成数据…

02MFC画笔/画刷/画椭圆/圆/(延时)文字

文章目录 画实心矩形自定义画布设计及使用连续画线及自定义定义变量扇形画椭圆/圆输出颜色文本定时器与定时事件 画实心矩形 自定义画布设计及使用 连续画线及自定义定义变量 扇形 画椭圆/圆 输出颜色文本 定时器与定时事件

近期matlab学习笔记,学习是一个记录,反复的过程

近期matlab学习笔记&#xff0c;学习是一个记录&#xff0c;反复的过程 matlab的mlx文件在运行的时候&#xff0c;不需要在文件夹路径下&#xff0c;也能运行&#xff0c;但是需要调用子函数时&#xff0c;就需要在文件所在路径下运行 那就先运行子函数&#xff0c;把路径换过来…

【STM32CubeMX安装教程】

【STM32CubeMX安装教程】 1. 前言2. 下载软件3. 安装配置4. 测试5. 小结 1. 前言 STM32CubeMX是一款图形化工具&#xff0c;可以非常轻松地配置STM32微控制器和微处理器&#xff0c;以及为Arm Cortex-M内核生成相应的初始化C代码&#xff0c;或为Arm Cortex-A内核生成部分Linu…

电子签章 签到 互动 打卡 创意印章 支持小程序 H5 App

电子签章 签到 互动 打卡 创意印章 支持小程序 H5 App 定制化

Mybatis-plus 集成 PostgreSQL 数据库自增序列问题记录

1.创建序列并绑定id CREATE SEQUENCE biz_factory_seq START WITH 1 INCREMENT BY 1 NO MINVALUE NO MAXVALUE CACHE 1;"id" int4 NOT NULL DEFAULT nextval(sys_user_seq::regclass), 2.实体设置KeySequence和TableId注解 注意IdType.INPUT 和 KeySequence(value …

docker inspect 如何提取容器的ip和端口 网络信息?

目录 通过原生Linux命令过滤找到IP 通过jq工具找到IP 使用docker -f 的过滤&#xff08;模板&#xff09; 查找端口映射信息 查看容器内部细节 docker inspect 容器ID或容器名 通过原生Linux命令过滤找到IP 通过jq工具找到IP jq 是一个轻量级且灵活的命令行工具&#xf…

通过FallbackFactory接口实现降级逻辑

触发限流或熔断后的请求不一定要直接报错&#xff0c;也可以返回一些默认数据或者友好提示&#xff0c;用户体验会更好。 给FeignClient编写失败后的降级逻辑有两种方式&#xff1a; 方式一&#xff1a;FallbackClass&#xff0c;无法对远程调用的异常做处理方式二&#xff1a…

GenAl如何改变 DevOps 中的软件测试?

TestComplete 是一款自动化UI测试工具&#xff0c;这款工具目前在全球范围内被广泛应用于进行桌面、移动和Web应用的自动化测试。 TestComplete 集成了一种精心设计的自动化引擎&#xff0c;可以自动记录和回放用户的操作&#xff0c;方便用户进行UI&#xff08;用户界面&…

读人工智能全传11人工智能会出什么错

1. 人工智能会出什么错 1.1. 一些报道是公正合理的&#xff0c;不过坦白地说&#xff0c;大部分报道都愚蠢得无可救药 1.2. 一些报道颇有知识性和引导性&#xff0c;而大部分则是杞人忧天式的恐吓 1.3. 滑稽的报道迎合了大众对人工智能的“终结者式恐惧” 1.3.1. 我们创造出…

python库(13):Tablib库简化数据处理

1 Tablib简介 数据处理是一个常见且重要的任务。无论是数据科学、机器学习&#xff0c;还是日常数据分析&#xff0c;都需要处理和管理大量的数据。然而&#xff0c;标准库中的工具有时显得不够直观和简便。这时&#xff0c;我们可以借助第三方库来简化数据处理流程。Tablib 就…

一.3.(1)结型MOSFET场效应管的结构和工作原理;

N沟道结型MOSFET的结构 看完上图&#xff0c;会发现其实本质上二极管&#xff0c;三极管&#xff0c;MOS管都是PN结&#xff0c;如果第一章一.1.&#xff08;1&#xff09;半导体基础知识_木头的最外层电子是多少个-CSDN博客 理解消化以后&#xff0c;发现底层原理都一样。 例如…

Linux进程编程(使用fork函数创建进程以及fork函数的实际引用场景)

目录 一、进程以及相关概念和指令 1.什么是进程、什么是程序、有什么区别&#xff1f; 2.如何查看系统中有哪些进程&#xff1f; 3.什么是进程标识符&#xff1f; 4.什么叫父进程&#xff0c;什么叫子进程&#xff1f; 二、进程的创建 三、fork函数的实际应用场景 总结…