当前位置: 首页 > news >正文

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

 

 <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);
},

相关文章:

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

<el-table class"list-box" :data"replaceDataList" border><el-table-column label"原始值" prop"original" align"center" ><template slot-scope"scope"><div mouseenter"showClick…...

Kafka接收消息

文章目录 Acknowledgment读消息指定分区批量消费消息拦截 // 采用监听得方式接收 Payload标记消息体内容. KafkaListener(topics {"test"},groupId "hello") public void onEvent(Payload String event,Header(value KafkaHeaders.RECEIVED_TOPIC) Stri…...

C语言 | Leetcode C语言题解之第233题数字1的个数

题目&#xff1a; 题解&#xff1a; int countDigitOne(int n) {// mulk 表示 10^k// 在下面的代码中&#xff0c;可以发现 k 并没有被直接使用到&#xff08;都是使用 10^k&#xff09;// 但为了让代码看起来更加直观&#xff0c;这里保留了 klong long mulk 1;int ans 0;f…...

简谈设计模式之原型模式

原型模式是一种创建型设计模式, 用于创建对象, 而不必指定它们所属的具体类. 它通过复制现有对象 (即原型) 来创建新对象. 原型模式适用于当创建新对象的过程代价较高或复杂时, 通过克隆现有对象来提高性能 原型模式结构 原型接口. 声明一个克隆自身的接口具体原型. 实现克隆…...

CentOS7.X系统部署Zabbix6.0版本(可跟做)

文章目录 一、部署环境说明二、基本环境部署步骤1、环境初始化操作2、部署并配置Nginx3、部署并配置PHP4、测试NginxPHP环境5、部署并配置MariaDB 三、Zabbix-Server部署步骤1、编译安装Zabbix-Server2、导入Zabbix初始化库3、配置Zabbix前端UI4、启动Zabbix-Server5、WEB页面配…...

QT文件生成可执行的exe程序

将qt项目生成可执行的exe程序可按照以下步骤进行&#xff1a; 1、在qt中构建运行生成.exe文件&#xff1b; 2、从自定义的路径中取出exe文件放在一个单独的空文件夹中&#xff08;exe文件在该文件夹中的release文件夹中&#xff09;&#xff1b; 3、从开始程序中搜索qt&#xf…...

【ZooKeeper学习笔记】

1. ZooKeeper基本概念 Zookeeper官网&#xff1a;https://zookeeper.apache.org/index.html Zookeeper是Apache Hadoop项目中的一个子项目&#xff0c;是一个树形目录服务Zookeeper翻译过来就是动物园管理员&#xff0c;用来管理Hadoop&#xff08;大象&#xff09;、Hive&…...

220V降5V芯片输出电压电流封装选型WT

220V降5V芯片输出电压电流封装选型WT 220V降5V恒压推荐&#xff1a;非隔离芯片选型及其应用方案 在考虑220V转低压应用方案时&#xff0c;以下非隔离芯片型号及其封装形式提供了不同的电压电流输出能力&#xff1a; 1. WT5101A&#xff08;SOT23-3封装&#xff09;适用于将2…...

AWS S3 基本概念

AWS S3 基本概念 引言什么是 AWS S3S3 应用S3 的核心概念 引言 最近工作中有接触到 S3&#xff0c;往 S3 写入数据&#xff0c;从 S3 访问数据&#xff0c;所以花点时间整理一下有关 S3 的基本概念。 什么是 AWS S3 AWS S3 (Amazon Simple Storage Service) 是一个由 Amazon…...

[XCUITest] 处理iOS权限点击授权 有哪些权限?

位置权限 (Location Permission) app.addUIInterruptionMonitor(withDescription: "Location Permission Dialog") { (alert) -> Bool in if alert.buttons["Allow While Using App"].exists { alert.buttons["Allow While Using App"].tap(…...

宪法学学习笔记(个人向) Part.5

宪法学学习笔记(个人向) Part.5 4. 公民基本权利和义务 4.1 公民&#x1f338; 概念 是指具有某个国家国籍的自然人&#xff1b; 【拓展】国籍&#xff1a;在宪法上是指一个人隶属于某个国家的法律上的身份&#x1f338; &#xff1b; 取得方式 出生国籍 因出生而获得的国籍&a…...

C语言的指针与数组

函数定义 参考书籍章节9.7 无论函数定义的参数是数组还是指针&#xff0c;在编译的时候&#xff0c;编译器都将在栈上开辟一个空间存放入参的地址&#xff0c;换句话说&#xff0c;也就是在函数内部都当做指针处理。 #include <stdio.h> #include <stdlib.h>char g…...

计算机图形学入门28:相机、透镜和光场

1.前言 相机(Cameras)、透镜(Lenses)和光场(Light Fields)都是图形学中重要的组成部分。在之前的学习中&#xff0c;都是默认它们的存在&#xff0c;所以现在也需要单独拿出来学习下。 2.成像方法 计算机图形学有两种成像方法&#xff0c;即合成(Synthesis)和捕捉(Capture)。前…...

Swift 基于Codable协议使用

Codable协议 继承自 Decodable & Encodable // // Test1.swift // TestDemo // // Created by admin on 2024/7/9. // import Foundationstruct Player{var name:Stringvar highScore:Int 0var history:[Int] []var address:Address?var birthday:Date?init(name: St…...

conda激活的虚拟环境的python版本不对应

这个大坑&#xff0c;要看看虚拟环境下envs下有没有bin文件夹 python -Vecho $PATH镜像源的问题&#xff0c;参考...

深度学习概览

引言 深度学习的定义与背景 深度学习是机器学习的一个子领域&#xff0c;涉及使用多层神经网络分析和学习复杂的数据模式。深度学习的基础可以追溯到20世纪80年代&#xff0c;但真正的发展和广泛应用是在21世纪初。计算能力的提升和大数据的可用性使得深度学习在许多领域取得…...

什么是白盒测试中的静态测试?其包含哪些过程和方法?

文章目录 前言一、文档审查二、软件静态分析1.编码规范检查2.软件质量度量 三、代码审查与代码走查1.代码审查2.代码走查 总结 前言 软件白盒测试中的静态测试是指不运行被测软件&#xff0c;仅通过分析或检查等手段达到检测的目的。在软件白盒测试中&#xff0c;静态测试常通…...

搭建一个高并发的Web商品推荐系统,如何涉及软件架构?

搭建一个高并发的Web商品推荐系统&#xff0c;如何涉及软件架构 在搭建一个高并发的Web商品推荐系统时&#xff1a; 微服务架构&#xff1a; 为了支持高并发&#xff0c;我们可以采用微服务架构&#xff0c;将系统拆分成小型、独立的服务&#xff0c;每个服务专注于特定的功…...

今日科技圈最新时事新闻(2024年7月12日

一、智能硬件与电子产品 小米Redmi G Pro 2024游戏本新版本发布 发布时间&#xff1a;7月12日上午10点产品亮点&#xff1a; 搭载英特尔酷睿i7-14650HX处理器&#xff0c;拥有16个核心和24个线程&#xff0c;性能释放高达130W。配备140W满血释放的RTX 4060显卡&#xff0c;提…...

jenkins系列-09.jpom构建java docker harbor

本地先启动jpom server agent: /Users/jelex/Documents/work/jpom-2.10.40/server-2.10.40-release/bin jelexjelexxudeMacBook-Pro bin % sh Server.sh start/Users/jelex/Documents/work/jpom-2.10.40/agent-2.10.40-release/bin jelexjelexxudeMacBook-Pro bin % ./Agent.…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...