当前位置: 首页 > 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);
},

http://www.lryc.cn/news/399427.html

相关文章:

  • Kafka接收消息
  • C语言 | Leetcode C语言题解之第233题数字1的个数
  • 简谈设计模式之原型模式
  • CentOS7.X系统部署Zabbix6.0版本(可跟做)
  • QT文件生成可执行的exe程序
  • 【ZooKeeper学习笔记】
  • 220V降5V芯片输出电压电流封装选型WT
  • AWS S3 基本概念
  • [XCUITest] 处理iOS权限点击授权 有哪些权限?
  • 宪法学学习笔记(个人向) Part.5
  • C语言的指针与数组
  • 计算机图形学入门28:相机、透镜和光场
  • Swift 基于Codable协议使用
  • conda激活的虚拟环境的python版本不对应
  • 深度学习概览
  • 什么是白盒测试中的静态测试?其包含哪些过程和方法?
  • 搭建一个高并发的Web商品推荐系统,如何涉及软件架构?
  • 今日科技圈最新时事新闻(2024年7月12日
  • jenkins系列-09.jpom构建java docker harbor
  • 构造+贪心,CF 432E,Square Tiling
  • 【Linux】任务管理
  • 计算机网络——常见问题汇总
  • Linux的世界 -- 初次接触和一些常见的基本指令
  • [AI 大模型] Meta LLaMA-2
  • Python3.6.6 OpenCV 将视频中人物标记或者打马赛克或加图片并保存为不同格式
  • Readiris PDF Corporate / Business v23 解锁版安装教程 (PDF管理软件)
  • .NET MAUI开源架构_2.什么是 .NET MAUI?
  • 认知偏差知识手册
  • SpringBoot后端代码基本逻辑
  • Python学生信息管理系统的设计与实现