当前位置: 首页 > 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.…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...