使用vue动态在列表中添加或者删除某一行

**

使用vue动态在列表中添加或者删除某一行

**
先看一下展示的效果:
在这里插入图片描述
好了上代码:
样式界面:

<template><div class="container"><h4 style="margin-left: 20px;">线路停靠站站点</h4><el-buttontype="primary"size="mini"icon="el-icon-circle-plus-outline"@click="addRow"style="margin-bottom: 20px;margin-left: 20px;">新增一行</el-button><el-table :data="tableData" border><el-table-columnlabel="序号"align="center"type="index"fixedsortablemin-width="80"/><el-table-column label="站点名称" prop="zdmc" align="center" ><template slot-scope="scope"><div class="flex align-center"><el-input v-model="scope.row.zdmc" /></div></template></el-table-column><el-table-column label="停靠时间" prop="zdsj" align="center" ><template slot-scope="scope"><div class="flex align-center"><!-- <el-input v-model="scope.row.colcumn2" /> --><el-time-picker  v-model="scope.row.zdsj"  class="date-box" format="HH:mm"  value-format="HH:mm"></el-time-picker></div></template></el-table-column><el-table-column label="是否启用" prop="isEnable" align="center" ><template slot-scope="scope"><div class="flex align-center"><!-- <el-input v-model="scope.row.colcumn" /> --><el-radio v-model="scope.row.isEnable" label="1">启用</el-radio><el-radio v-model="scope.row.isEnable" label="-1">不启用</el-radio></div></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-buttontype="success"icon="el-icon-plus"circlesize="small"@click="addRowIndex(scope.$index)"></el-button><el-buttontype="danger"icon="el-icon-minus"circlesize="small"@click="delRow(scope.$index)"></el-button></template></el-table-column></el-table><div class="form_block" style="text-align: center;"><el-button @click="cancel" v-if="!disabled">取消</el-button><el-button type="primary" @click="handleSubmit" v-if="!disabled">提交</el-button></div></div>
</template>

js代码

 // 增加一行addRow() {const row = {colcumn1: "",colcumn2: "",isEnable:"1",};this.tableData.push(row);},// 删除指定行delRow(index) {this.tableData.splice(index, 1);},// 指定位置插入行addRowIndex(index) {const row = {colcumn1: "",colcumn2: "",isEnable:"1",};this.tableData.splice(index + 1, 0, row);},

记得在 return 的data中定义数据 tableData: [],

完成!!

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

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

相关文章

无缝集成 MongoDB Relational Migrator,Tapdata 提供关系型到 MongoDB 实时迁移优化方案

在去年的 MongoDB 用户大会纽约站上&#xff0c;MongoDB 正式宣布全面推出新工具 MongoDB Relational Migrator&#xff08;MongoDB RM&#xff09;&#xff0c;用以简化应用程序迁移和转换——即从传统关系型数据模型到现代的文档数据模型&#xff0c;助力组织快速提升运营效率…

数字图像处理 使用C#进行图像处理九 实现傅里叶变换

一、简述 傅立叶变换将图像分解为其正弦和余弦分量。换句话说,它将图像从空间域变换到频率域。这个想法是任何函数都可以用无限正弦函数和余弦函数之和来精确近似。傅里叶变换是实现此目的的一种方法。 网上有很多关于傅里叶变换的文章,这里就不进行赘述了,这里主要结合代码…

java中xml概述

1.xml 1.1概述【理解】 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域最具权威和影响力的国际中立性技术标准机构。 到目前为…

element ui 中文离线文档(百度云盘下载)

一般内网开发上不了网&#xff0c;用离线版本比较方便&#xff0c;下载地址&#xff1a; https://download.csdn.net/download/li836779537/88355878?spm1001.2014.3001.5503 下载后里面有个 index.hrml 双击打开就可以用 效果如下&#xff1a;

Python程序设计基础——代码习题

1 __name__属性 import demodef main():if __name__ __main__:print(这个程序被直接运行。)elif __name__demo:print(这个程序作为模块被使用。) main()3.3 编写程序&#xff0c;生成包含1000个0~100之间的随机整数&#xff0c;并统计每个元素出现的次数。 import randomx[r…

助贷系统crm:帮助助贷机构实现高效的客户关系管理

助贷系统CRM&#xff08;客户关系管理系统&#xff09;是一种能够帮助助贷企业实现高效客户关系管理的工具&#xff0c;通过助贷系统CRM&#xff0c;助贷企业可以更好地管理企业客户信息&#xff0c;跟踪客户互动、提高客户满意度&#xff0c;从而促进业务增长。 1. 客户信息集…

vMware WorkStation创建虚拟机安装CentOS7,NAT模式配置网络

一、安装虚拟机 1、选择典型&#xff08;推荐&#xff09;配置 2、选择稍后安装操作系统 3、操作系统选择CentOS7 64位 4、虚拟机命名、选择安装位置 6、指定磁盘容量 7、指定磁盘容量 步骤&#xff1a; &#xff08;1&#xff09;、系统内存2GB &#xff08;2&#xff09;、…

linux-MDK can电机带导轨

确保接线正确&#xff0c;这个带导轨的电机需要24V的电压 $ ls /dev //查看端口是什么$ sudo slcand -o -s6 /dev/ttyACM0 can0 //将端口封装为can0 $ sudo ip link set can0 up //打开端口 按照电机说明书&#xff0c;按照需要的指令计算检验和&#xf…

FreeRTOS 的任务挂起和恢复

1. 任务挂起和恢复的 API 函数 API函数描述vTaskSuspend()挂起任务vTaskResume()恢复被挂起的任务xTaskResumeFromISR()在中断中恢复被挂起的任务 挂起&#xff1a;挂起任务类似暂停&#xff0c;可恢复&#xff1b; 删除任务&#xff0c;堆栈都给释放掉了&#xff0c;无法恢复…

计算机网络-第7章 网络安全(2)

7.5 密钥分配 7.6 互联网使用的安全协议 7.7 系统安全&#xff1a;防火墙与入侵检测

【故障电弧探测器 方案介绍】安科瑞电气火灾监控系统

什么是电弧&#xff1f; 电弧俗称‘电火花’ &#xff0c;又叫‘打火’ &#xff0c;本质是一种绝缘体被电压击穿后&#xff0c;由不导电变的导电&#xff0c;且发光发热的自然现象。 什么是故障电弧&#xff1f; 由于电气线路或设备中绝缘老化破损、电气连接松动、空气潮湿…

SpringCloud Hystrix 断路器

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第五篇&#xff0c;即介绍 Hystrix 断路器。 二、概述 2.1 分布式系统面临的问题 复杂分布式体系结构中…

TIOBE 3月编程排行榜出炉:遥遥领先,霸榜第一!

哈喽呀~又到了每个月的语言排行榜啦&#xff01; TIOBE 3月编程语言也已经公布&#xff0c;具体有啥新变化呢&#xff1f;快和我一起往下看~ Python遥遥领先&#xff0c;霸榜第一 先来看看本月排行榜top5的表现。毫无疑问&#xff0c;Python依然遥遥领先&#xff1a; Python 第…

RabbitMQ学习笔记——消息转化器

消息转化器的问题&#xff0c;如果我们发送方发送的数据为引用类型的对象&#xff0c;默认使用的是JDK内部自带的ObjectOutputStream进行对象序列化和反序列化&#xff0c;这样做比较复杂并且不安全。 我们可以引入Jackson来做对象的序列化&#xff0c;可将默认的JDK消息转化器…

Testng认识与配置-全网最简单

总结&#xff1a;testng支持注解&#xff0c;线程池&#xff0c;数据驱动&#xff0c;参数化&#xff0c;强大执行模式&#xff0c;也支持单元测试&#xff0c;功能测试&#xff0c;接口测试 TestNG is a testing framework inspired from JUnit and NUnit but introducing som…

Samtec前沿 | 信号发生器 - 决定可靠性的重要因素之一

【摘要/前言】 作为消费者&#xff0c;我们已经开始期待我们的技术达到一个前所未有的可靠性水平。无论是智能手机还是家庭汽车&#xff0c;我们已经开始期待智能电子设备在每次使用时都能在第一时间发挥作用。 【信号和电源发生器至关重要】 现代设备能够提供如此出色的…

外包干了5天,技术明显退步。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近2年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…

VXLAN学习笔记

声明&#xff1a;该博客内容大部分参考参考链接整理 什么是VXLAN&#xff1f; VXLAN(Virtual Extensible LAN)即虚拟扩展局域网&#xff0c;是大二层网络中广泛使用的网络虚拟化技术。在源网络设备与目的网络设备之间建立一条逻辑VXLAN隧道&#xff0c;采用MAC in UDP的封装方…

Vue+SpringBoot打造大学生相亲网站

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询会员4.2 查询相亲大会4.3 新增留言4.4 查询新闻4.5 新增新闻 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的大学生相亲网站&#xff0c;包含了会员管理模块、新闻管…

嵌入式系统中端口号的理解与分析

每当看到有人的简历上写着熟悉 tcp/ip, http 等协议时, 我就忍不住问问他们: 你给我说说, 端口是啥吧! 可惜, 很少有人能说得让人满意... 所以这次就来谈谈端口(port), 这个熟悉的陌生人. 在此过程中, 还会谈谈间接层, naming service 等概念, IoC, 依赖倒置等原则以及 TCP 协议…