【element+vue】点击加号增加一行,点击减号删除一行

news2025/7/20 9:42:36

代码实现:

页面部分: vue+element

备注:v-if =“i>0” (保证第一行不出现减号)

 <div v-for="(item,i) in studentList">
   <el-form-item label="学生:" prop="name">
     <el-input v-model="studentList[i].name" clearable placeholder="姓名"></el-input>
   </el-form-item>
   <el-form-item prop="age">
      <el-input v-model="studentList[i].age" clearable placeholder="年龄"></el-input>
   </el-form-item>
   <el-button circle icon="el-icon-plus" @click="addList()"></el-button>
   <el-button circle icon="el-icon-minus" @click="subList(i)" v-if="i>0"></el-button>
 </div>

数据部分:赋一组空值,页面自动显示第一行

 data() {
       return {
         studentList: [
           {name: '', age: ''}
         ]
       }
     }

函数部分:点击加号,给数组新增一组空值,新增一行;点击减号,将行号传入,删除当前行

methods: {
        //加号
        addList() {
            this.studentList.push({name: '', age: ''})
        },
        //减号
        subList(index) {
          this.studentList.splice(index, 1)
        }
 }

参考文档

【element+vue】点击加号增加一行,点击减号删除一行_vue点击加号增加一组-CSDN博客

vue 实现动态表单,点击新增 增加一行输入框 - 爱喝可乐的靓仔 - 博客园 (cnblogs.com)

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

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

相关文章

电动车进电梯监测报警摄像机助力提升安全管理

电动车作为环保、便捷的出行工具&#xff0c;在城市中越来越受到人们的青睐。然而&#xff0c;在电梯内使用电动车存在一定的安全隐患&#xff0c;为了有效管理电动车进出电梯的安全&#xff0c;一款电梯监测报警摄像机应运而生&#xff0c;为出行安全提供了更为全面的保障。 这…

StarRocks之监控管理(内含DashBoard模板)

先看下最终效果图 架构 Prometheus 是一个拥有多维度数据模型的、灵活的查询语句的时序数据库。它可以通过 Pull 或 Push 采集被监控系统的监控项,存入自身的时序数据库中。并且通过丰富的多维数据查询语言,满足用户的不同需求。 Grafana 是一个开源的 Metric 分析及可视化系…

C#使用Bogus生成测试数据

Bogus介绍 Bogus 是一个流行的 C# 库&#xff0c;用于生成伪造数据。它提供了简单而强大的 API&#xff0c;可以帮助开发人员轻松生成各种类型的随机数据&#xff0c;包括姓名、地址、日期、电子邮件、电话号码等。Bogus 设计灵活&#xff0c;使其适用于各种测试场景&#xff…

10分钟快速开始SkyWalking结合Springboot项目

10分钟快速开始SkyWalking结合Springboot项目 实习期间&#xff0c;公司让我去学习一下链路追踪如何集成到Springboot项目中。 为此有两个方案&#xff1a; 1.opentelementryjaegerprometheus opentelementry 收集器收集线上的metrics和traces&#xff0c;然后发送给jaeger和p…

Acwing周赛记录

很难得参加一次周赛hhhhh这次参加的是第144场周赛&#xff0c;一共有三道题 AcWing 5473. 简单数对推理 给定两个整数数对&#xff0c;每个数对都包含两个 1∼9 之间的不同整数。 这两个数对恰好包含一个公共数&#xff0c;即恰好有一个整数同时包含于这两个数对。 给定这两…

Python算法100例-2.7 爱因斯坦的数学题

完整源代码项目地址&#xff0c;关注博主私信源代码后可获取 1.问题描述2.问题分析3.算法设计4.确定程序框架5.完整的程序6.运行结果 1&#xff0e;问题描述 爱因斯坦出了一道这样的数学题&#xff1a;有一条长阶梯&#xff0c;若每步跨2阶&#xff0c;则最后剩一阶&#xf…

国产服务器操作系统

为何记录 最近的开发工作经常接触到国产服务器操作系统的业务&#xff0c;经常被x86、arm、龙芯、鲲鹏、欧拉...搞得一脸懵逼&#xff0c;遂记之&#xff01; 操作系统 这里按照应用场景分&#xff1a; 桌面操作系统&#xff1a;主要用于pc&#xff0c;如Windows、macOS、Li…

6547网:少儿编程开启孩子未来的大门

在这个信息化的时代&#xff0c;计算机技术已经渗透到我们生活的方方面面。为了让孩子们更好地适应未来社会的发展&#xff0c;越来越多的家长开始关注少儿编程教育。少儿编程不仅能够培养孩子们的逻辑思维能力&#xff0c;还能激发他们的创造力和想象力。在众多编程语言中&…

【MATLAB】 小波分解信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 小波分解算法 小波分解算法是一种数学方法&#xff0c;用于将信号分解为不同频率的小波成分。这种算法基于小波函数&#xff0c;可以用于信号处理、图像压缩和数据压缩等领域。小波分解算法的基本思想是…

vue项目build 静态文件部署到fastapi后台中访问白屏,访问不到?

正常创建VUE项目那些应该都会&#xff0c;到项目最后 npm run build然后会生成一个dist文件夹 然后把这个文件夹的东西复制去到fastapi项目根目录创建一个static文件夹 然后开始写点代码 # main.py绑定静态文件目录 app.mount("/static", StaticFiles(directory&…

LinkedList的使用(Java)

目录 一、介绍二、LinkedList的使用1、LinkedList的构造2、 LinkedList的其他常用方法介绍3、LinkedList的遍历 三、ArrayList和LinkedList的区别 一、介绍 LinkedList的底层是双向链表结构&#xff0c;由于链表没有将元素存储在连续的空间中&#xff0c;元素存储在单独的节点…

python使用winio控制x86工控机的gpio

视频讲解 https://www.bilibili.com/video/BV1Nu4m1w7iv/?vd_source5ba34935b7845cd15c65ef62c64ba82f pywinio库 https://pypi.org/project/pywinio/ 安装库 pip install pywinio寄存器地址 测试代码 import pywinio winio get_winio() # 设置排针2输出1,0x40是bit6置…

登录页设计新选择:毛玻璃和新拟态风格,非2.5D和插画风

登录页给潜在用户传递了产品的品牌调性&#xff0c;是非常重要的一类页面&#xff0c;之前2.5D和插画风格的登录页流行一时&#xff0c;不过这阵风好像过去了&#xff0c;新的风格开始涌现了。 一、越来越流行的毛玻璃设计风格 毛玻璃风格是指将背景模糊处理&#xff0c;使得…

壹基金瑞金儿童服务站:平安小课堂开课了!

为进一步加强儿童安全文化建设&#xff0c;提升学生安全意识、风险意识和自我防护能力&#xff0c;2月2日&#xff0c;壹基金瑞金儿童服务站&#xff08;瑞金赋能公益&#xff09;引入壹基金儿童安全计划资源&#xff0c;对社区儿童开展儿童安全教育。 与其永远为孩子遮风挡雨&…

46.仿简道云公式函数实战-文本函数-CHAR

1. CHAR函数 函数可将计算机其他类型的数字代码转换为字符。 2. 函数用法 CHAR(number) CHAR 函数可将计算机其他类型的数字代码转换为字符。 Number&#xff1a;用于指定字符的数字。 3. 函数示例 CHAR(10)&#xff0c;即返回值为换行字符"\n"。 目前仿简道…

第40期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

YOLOv9-Openvino和ONNXRuntime推理【CPU】

1 环境&#xff1a; CPU&#xff1a;i5-12500 Python&#xff1a;3.8.18 2 安装Openvino和ONNXRuntime 2.1 Openvino简介 Openvino是由Intel开发的专门用于优化和部署人工智能推理的半开源的工具包&#xff0c;主要用于对深度推理做优化。 Openvino内部集成了Opencv、Tens…

GS069——直流有刷电机调速电路 通过外接电阻网络,改变与之相接的 VMOS 管的输出,达到控制电动工具 转速的作用。 功耗小,电源电压范围宽。

GS069电动工具直流调速电路是CMOS专用集成电路&#xff0c;具有电源电压范 围宽、功耗小、抗干扰能力强等特点。通过外接电阻网络&#xff0c;改变与之相接 的VMOS 管的输出&#xff0c;达到控制电动工具转速的作用。该电路输出幅值宽&#xff0c; 频率变化小&#xff0c;占空比…

AD域环境搭建

实验环境 服务端Windows Server 2016&#xff0c;IP地址为192.168.116.129/24&#xff0c;关闭防火墙 客户端Windows 7&#xff0c;IP地址为192.168.116.131/24&#xff0c;关闭防火墙 AD域安装 1、服务端配置 添加AD域服务 安装即可 安装后升级为域控 添加新林&#xff0c;…

机器学习-01-课程目标与职位分析

总结 本系列是机器学习课程的第01篇&#xff0c;主要介绍本门课程的课程目标与职位分析 教材 数据挖掘与机器学习 课程教学方法 布鲁姆教学法 认知领域&#xff08;cognitive domain&#xff09; 1.知道&#xff08;知识&#xff09;&#xff08;knowledge&#xff09; 是指…