Vue 表格动态添加行/删除行

<template><div class="elife-container"><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button><el-button:disabled="showAble"type="info"plainsize="mini"@click="handleCancel">取消</el-button></el-col></el-row><!-- 表格信息 --><div v-show="showTable"><el-tablev-loading="loading":data="dataList":header-cell-style="{ 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"><el-table-columnlabel="字段1"prop="value1":show-overflow-tooltip="true"><template slot-scope="scope"><div v-if="scope.row.editable"><el-input v-model="scope.row.value1"></el-input></div><div v-else>{{ scope.row.value1 }}</div></template></el-table-column><el-table-columnlabel="字段2"prop="value2":show-overflow-tooltip="true"><template slot-scope="scope"><div v-if="scope.row.editable"><el-input v-model="scope.row.value2"></el-input></div><div v-else>{{ scope.row.value2 }}</div></template></el-table-column><el-table-columnlabel="字段3"prop="value3":show-overflow-tooltip="true"><template slot-scope="scope"><div v-if="scope.row.editable"><el-input v-model="scope.row.value3"></el-input></div><div v-else>{{ scope.row.value3 }}</div></template></el-table-column><el-table-columnlabel="字段4"prop="value4":show-overflow-tooltip="true"><template slot-scope="scope"><div v-if="scope.row.editable"><el-input v-model="scope.row.value4"></el-input></div><div v-else>{{ scope.row.value4 }}</div></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-buttonv-show="scope.row.editable"size="mini"type="text"@click="handleSave(scope.$index, scope.row)">保存</el-button><el-buttonv-show="scope.row.editable"size="mini"type="text"@click="handleSave(scope.$index, scope.row)">取消</el-button><el-buttonv-show="!scope.row.editable"size="mini"type="text"@click="handleUpdate(scope.$index, scope.row)">修改</el-button><el-buttonsize="mini"type="text"@click="handleDetele(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></div>
</template><script>
import * as Config from "./data.js";
export default {name: "WarningManage", // 预警管理data() {return {showAble: true,// 遮罩层loading: false,// 数据集dataList: [],showTable: true,};},mounted() {this.getList();},methods: {// 获取数据getList() {this.loading = true;this.dataList = Config.warningData;this.dataList.map((item) => {item.editable = false;});this.total = this.dataList.length;this.loading = false;},handleAdd() {let obj = {};obj.editable = true;this.showAble = false;this.dataList.push(obj);},handleCancel() {this.dataList.splice(-1, 1);this.showAble = true;},handleSave(data1, data2) {this.showTable = false;this.dataList[data1].editable = false;this.showAble = true;this.showTable = true;},handleUpdate(data1, data2) {console.log("111", data1);this.showTable = false;this.dataList[data1].editable = true;this.showTable = true;// this.showAble = true;},handleDetele(index) {this.dataList.splice(index, 1);},},
};
</script><style lang="scss" scoped>
.cell-text {color: #1890ff;cursor: pointer;
}
</style>

在这里插入图片描述

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

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

相关文章

代码随想录算法训练营Day44|322.零钱兑换、279.完全平方数、139.单词拆分

零钱兑换 322. 零钱兑换 - 力扣&#xff08;LeetCode&#xff09; 本题是完全背包问题 dp数组表示组成amount金额所需的最少硬币个数。 考虑dp数组的推导公式&#xff0c;由于是计算最少硬币的个数&#xff0c;所以需要考虑dp[i-coins[j]1和dp[i]的较小值。所以dp[i] min(…

js中的正则表达式简述

JavaScript中的正则表达式简述 正则表达式是一种强大的文本处理工具&#xff0c;它可以帮助我们在JavaScript中进行复杂的文本匹配、搜索和替换操作。博主在下面介绍一些基本的正则表达式语法&#xff1a; 当然这些语法不止适用于js&#xff0c;因为各种语言下的正则语法基本…

企业微信集成策略:打破壁垒,驱动企业数字化转型

随着全球化和数字化的快速推进&#xff0c;企业如何在激烈的市场竞争中脱颖而出&#xff0c;成为每个企业家和决策者关注的焦点。腾讯推出的企业微信&#xff0c;作为一款集沟通、协作、管理于一体的企业通讯与办公工具&#xff0c;正逐步成为企业数字化转型的得力助手。NetFar…

JVM 垃圾收集算法

首先我们要知晓&#xff0c;垃圾收集是建立在两个分代假说之上的&#xff1a; ①弱分代假说&#xff1a;绝大多数对象都是朝生夕灭的 ②强分代假说&#xff1a;熬过越多次垃圾收集的对象就越难消亡 收集器应该将Java堆划分出不同的区域&#xff0c;然后将回收对象依据其年龄分配…

武汉工程大学24计算机考研数据,有学硕招收调剂,而专硕不招收调剂!

武汉工程大学是一所以工为主&#xff0c;覆盖工、理、管、经、文、法、艺术、医学、教育学等九大学科门类的多科性教学研究型大学&#xff0c;是湖北省重点建设高校、湖北省国内一流学科建设高校&#xff0c;入选卓越工程师教育培养计划、中西部高校基础能力建设工程、“新工科…

spring boot接入nacos 配置中心

再接入nacos配置中心时&#xff0c;需要确认几点&#xff1a; 1. spring boot 版本 (spring boot 2.x ) 2. nacos 配置中心 服务端 版本 (1.1.4) 3. nacos client 客户端版本 (1.1.4) 方式一 1. 启动 nacos 服务端&#xff0c;这里不做解释 在配置中心中加入几个配置 2. 在…

吴恩达机器学习 第三课 week1 无监督机器学习(下)

目录 01 学习目标 02 异常检测算法 2.1 异常检测算法的概念 2.2 基于高斯模型的异常检测 03 利用异常检测算法检测网络服务器的故障 3.1 问题描述 3.2 算法实现 3.3 问题升级 04 总结 01 学习目标 &#xff08;1&#xff09;理解异常检测算法&#xff08;Anomaly Dete…

六爻排盘神机

选修课留了3000字的论文......确实&#xff0c;削微有那么一点小困难…… 但是&#xff0c;倘若我拿出已经占了6419个字符的 “六爻排盘神机” &#xff0c;阁下…应该…不会…骂我吧 且看&#xff0c;六爻排盘神机&#xff01; import random import datetime from lunarcale…

FlashAttention-2 论文阅读笔记

FlashAttention-2是对原始FlashAttention算法的一系列改进&#xff0c;旨在优化在GPU上的计算性能。本节详细讨论了FlashAttention-2的算法、并行性以及工作分区策略。 算法 FlashAttention-2的关键优化点在于减少非矩阵乘法&#xff08;matmul&#xff09;的浮点运算&#x…

详解工业网关在线探测功能及用途

详解工业网关在线探测功能及用途 工业网关作为工业物联网&#xff08;IIoT&#xff09;架构中的关键组件&#xff0c;扮演着桥梁的角色&#xff0c;它连接了现场的各类传感器、执行器以及更高级别的云平台或企业系统。在线探测功能是工业网关诸多能力中的一项重要特性&#xf…

2024年文化、艺术设计与社会科学国际学术会议(ICCADSS 2024)

2024年文化、艺术设计与社会科学国际学术会议&#xff08;ICCADSS 2024&#xff09; 重要信息 会议官网&#xff1a;http://www.iccadss.com 会议地址&#xff1a;北京 收录检索&#xff1a;EI,CPCI,CNKI,Google Scholar 投稿邮箱&#xff1a;society_info163.com 投稿标题&am…

Swagger的基本使用(快速入门)

目录 一、环境配置 (1)导入依赖:(一般导入依赖都会报错,所以大家也可以借鉴一下这篇文章:swagger配置报错) (2)启动类添加注解 二、Swagger配置介绍 (1)基本配置 (2)设置扫描的包 三、Swagger常用注解 (1)@Api (2)@ApiOperation (3)@ApiParam (…

clean code-代码整洁之道 阅读笔记(第十一章)

第十一章 系统 “复杂要人命,它消磨开发者的生命&#xff0c;让产品难以规划、构建和测试。” --RayOzzie&#xff0c;微软公司首席技术官 11.1 如何建造一个城市 每个城市都有一组组人管理不同的部分&#xff0c;有些人负责全局&#xff0c;其他人负责细节。 城市能运转&#…

如何解决 torch.cuda.is_available()是False

目录 1. 问题2. 解决方法2.1 安装torch的CUDA版本2.1.1 查看安装的torch是什么版本2.1.2 下载GPU版本的torch 2.2 安装 NVIDIA CUDA2.2.1 下载CUDA Toolkit2.2.2 安装CUDA Toolkit 最终效果 1. 问题 在Python中&#xff0c;使用Pytorch时&#xff0c;往往会选择使用CUDA模块&a…

行业唯一!三翼鸟场景品牌战略推动价值凸显

文 | 智能相对论 作者 | 佘凯文 当你的一只羊跑进别人的羊群中&#xff0c;怎么才能找到它&#xff1f; 从前人们为了区分自己的财产&#xff0c;会用烧红的铁块印在动物身上作为标记。在中世纪的欧洲&#xff0c;手工艺匠人用这种烧灼的方法在自己的手工艺品上烙下标记&…

「Python-docx 专栏」docx 设置页面边距、页眉页脚高度

本文目录 前言一、docx 页面边距在哪里二、对 <w:pgMar> 的详细说明1、上边距的说明2、右边距的说明3、下边距的说明4、左边距的说明5、页眉高度的说明6、页脚高度的说明三、设置 docx 页边距、页眉页脚高度1、完整代码2、代码执行效果图四、补充一些内容1、页面边距的两…

AI风险的优先级划分

AI 风险的优先级划分是一个复杂的过程&#xff0c;需要考虑多个因素。以下是一些常见的考虑因素和方法&#xff1a; 风险的可能性&#xff1a;评估 AI 系统产生风险的概率。高可能性的风险通常应被视为更高优先级。 风险的影响&#xff1a;考虑风险对人类、社会、环境或其他方面…

[面试题]RabbitMQ

[面试题]Java【基础】[面试题]Java【虚拟机】[面试题]Java【并发】[面试题]Java【集合】[面试题]MySQL[面试题]Maven[面试题]Spring Boot[面试题]Spring Cloud[面试题]Spring MVC[面试题]Spring[面试题]MyBatis[面试题]Nginx[面试题]缓存[面试题]Redis[面试题]消息队列[面试题]…

Python里引用了time包后,不能再命名time变量了吗?

在Python中&#xff0c;一旦你使用import语句导入了某个模块&#xff08;比如time模块&#xff09;&#xff0c;你就不能再使用相同的名字&#xff08;在这个例子中是time&#xff09;来命名变量、函数或其他任何东西。这是因为导入的模块会被加入到当前的命名空间中&#xff0…

全面解析:C# 委托的实质性应用与优势

有人问C#的委托&#xff08;Delegate&#xff09;有什么实质性用途?委托在C#其实是无处不在&#xff0c;那么它具体用在那里呢&#xff1f;。 本文将从委托&#xff08;Delegate&#xff09;定义和演变讲起&#xff0c;让大家一目了然。 C#的委托&#xff08;Delegate&#…