(vue)增加行,对应行删除

(vue)增加行,对应行删除


效果:
在这里插入图片描述


代码:

<div v-for="(ele,i) of algorithmList" :key="i">
  <el-form-item label="模型类型">
    <el-select
      v-model="ele.algorithmId"
      placeholder="选择模型类型"
      @change="modelTypeChanged"
    >
      <el-option
        v-for="(item,index) in modelTypeOptions"
        :key="index"
        :label="item.category"
        :value="item.category"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="模型工具">
    ...
  </el-form-item>
  <el-form-item>
    <i class="el-icon-circle-plus-outline" @click="suanfaAddBtn" style="margin:0 20px;"></i>
    <i class="el-icon-remove-outline" @click="suanfaDelParam(ele, i)"></i>
  </el-form-item>
</div>

data(){
	return:{
      algorithmList: [
        {
          algorithmId: "",
          algorithmName: "", 
        },
      ],
	}
},
methods:{
	//添加
	suanfaAddBtn() {
	  this.algorithmList.push({
	    algorithmId: "",
	    algorithmName: "", 
	  });
	},
	//删除
	suanfaDelParam(ele, i) {
	  if (this.algorithmList.length > 1) {
	    this.algorithmList.splice(i, 1);
	  } else if (this.algorithmList.length == 1) {
	    this.$message({
	      message: "此类不允许删除",
	      type: "warning",
	    });
	  }
	},
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

技术旅程分享:收获与成长的探索

2023年对我而言是充满挑战和机遇的一年&#xff0c;我在这段时间里积累了丰富的技术经验和个人成长。通过不懈努力和持续学习&#xff0c;我在技术领域迈出了一系列坚实的步伐。在这篇文章中&#xff0c;我将分享我在这段时间中的收获和技术成长经历&#xff0c;与CSDN的朋友们…

基于Vue的宿舍管理系统

基于Vue的宿舍管理系统资源-CSDN文库 基于 Koa 以及 VueJS 的宿舍管理系统。 新增功能&#xff1a; 【楼层管理】添加『入住人员信息』模块&#xff0c;显示入住学生、性别、院系、专业的人数&#xff0c;可用饼图表示【用户信息】学生用户添加性别、院系、专业字段【楼层管理…

【Vue2+3入门到实战】(21)认识Vue3、使用create-vue搭建Vue3项目、熟悉项目和关键文件

目录 一、认识Vue31. Vue2 选项式 API vs Vue3 组合式API2. Vue3的优势 二、 使用create-vue搭建Vue3项目1. 认识create-vue2. 使用create-vue创建项目 三、 熟悉项目和关键文件四、总结 一、认识Vue3 1. Vue2 选项式 API vs Vue3 组合式API <script> export default {…

YOLOv8改进 | 主干篇 | CSWinTransformer交叉形窗口网络

一、本文介绍 本文给大家带来的改进机制是CSWin Transformer,其基于Transformer架构,创新性地引入了交叉形窗口自注意力机制,用于有效地并行处理图像的水平和垂直条带,形成交叉形窗口以提高计算效率。它还提出了局部增强位置编码(LePE),更好地处理局部位置信息,我将其…

Kubernetes之Ingress详解

目录 IngressIngress配置配置写法转发到单个后端服务不同的URL路径被转发到不同的服务上不同的域名转发到不同的服务上不使用域名的转发规则 Ingress Ingress 是 Kubernetes 中的一种 API 对象&#xff0c;用于管理和配置集群中的 HTTP 和 HTTPS 服务路由。 Ingress 可以在 K…

Termius for Mac/Win:一款功能强大的终端模拟器、SSH 和 SFTP 客户端软件

随着远程工作和云技术的普及&#xff0c;对于高效安全的远程访问和管理服务器变得至关重要。Termius&#xff0c;一款强大且易用的终端模拟器、SSH 和 SFTP 客户端软件&#xff0c;正是满足这一需求的理想选择。 Termius 提供了一站式的解决方案&#xff0c;允许用户通过单一平…

webpack知识点总结(高级应用篇)

除开公共基础配置之外&#xff0c;我们意识到两点: 1. 开发环境(modedevelopment),追求强大的开发功能和效率&#xff0c;配置各种方便开 发的功能;2. 生产环境(modeproduction),追求更小更轻量的bundle(即打包产物); 而所谓高级应用&#xff0c;实际上就是进行 Webpack 优化…

清风数学建模笔记-时间序列分析

内容&#xff1a;时间预测分析 一.时间序列 1.时点时间序列 2.时期时间序列&#xff1a;可相加 二.时间趋势分解 1.季节趋势 拓展&#xff1a;百度指数&#xff1a; 2.循环变动趋势&#xff08;和季节很像但是是以年为单位&#xff09; 3.不规则变动趋势&#xff08;像扰…

微信小程序封装vant 下拉框select 单选组件

先上效果图&#xff1a; 主要是用vant 小程序组件封装的&#xff1a;vant 小程序ui网址&#xff1a;vant-weapp 主要代码如下: 先封装子组件&#xff1a; select-popup 放在 components 文件夹里面 select-popup.wxml: <!--pages/select-popup/select-popup.wxml--> &…

(JAVA)-反射

什么是反射&#xff1f; 反射允许对成员变量&#xff0c;成员方法和构造方法的信息进行编程访问。 说简单点就是反射能将类里面的构造方法&#xff0c;成员变量,修饰符,返回值&#xff0c;注解&#xff0c;类型&#xff0c;甚至异常等类里面的所有东西都能够获取出来。 关于C…

Canvas保姆级教程----深入解析HTML5 Canvas工作原理和常用方法

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4…

8086CPU的寻址方式(7种)

基本概念 立即操作数&#xff1a;操作数包含在指令中寄存器操作数&#xff1a;操作数包含在CPU的某个内部寄存器中存储器操作数&#xff1a;约定操作数事先存放在存储器中存放数据的某个单元基本格式 MOV xx,yy xx&#xff1a;目的操作数字段 yy&#xff1a;源操作数字段 EA&a…

英飞凌AURIX 2G TC3xx新一代芯片架构系列介绍-概论

英飞凌AURIX 2G TC3xx新一代芯片架构系列介绍-概论

普中STM32-PZ6806L开发板(HAL库函数实现-温度传感器DS18B20)

简介 主芯片STM32F103ZET6, 通过引脚PG11 连接DS18B20, 读取DS18B20采集的温度数据;电路原理图 DS18B20电路图 DS18B20 与 主芯片连接引脚 其他知识 DS18B20资料 DS18B20数据手册 DS18B20 简介 单线通讯的温度传感器, 测量温度在-55℃ 到 125℃&#xff0c; 在-10C 到…

python 知识点

ping ping 不能带协议&#xff0c;如&#xff1a;ping baidu.com 引入包顺序 分三级&#xff0c;第一级是 Python 的内置库&#xff0c;第二级是第三方库&#xff0c;第三级是自己的代码。每一级用一个空行间隔 运算符 keyError&#xff1a;key不存在 列表推导式 创建字典 字…

华芯微特|MCU之TIMER输入捕获

引言 华芯微特公司SWM系列单片机提供的TIMER个数和功能有些微差别&#xff0c;为了让您更加简单的使用这一功能&#xff0c;下面小编将以SWM190为例&#xff0c;我们今天详细讲解一下TIMER的输入捕获功能。 TIMER输入捕获 一、TIMER定时器之输入捕获功能 我们今天详细讲解一下…

网络安全—SSL安全访问应用

文章目录 网络拓扑部署CA服务器颁发证书开启Web服务安装IIS服务修改Web默认网页 申请Web证书前提准备申请文件生成申请web证书开始安装web证书 客户机访问web默认网站使用HTTP使用HTTPS 为客户机安装浏览器证书 环境&#xff1a;Windows Server 2003 网络拓扑 这里使用NAT还是…

输入输出流

1.输入输出流 输入/输出流类&#xff1a;iostream---------i input&#xff08;输入&#xff09; o output&#xff08;输出&#xff09; stream&#xff1a;流 iostream&#xff1a; istream类&#xff1a;输入流类-------------cin&#xff1a;输入流类的对象 ostream类…

潮玩宇宙大逃杀游戏搭建

潮玩宇宙是当下较火的社交互动平台&#xff0c;它不仅涵盖了各种潮玩商品&#xff0c;还拥有各种游戏玩法&#xff0c;尤其是大逃杀游戏非常火爆&#xff01;本文将介绍大逃杀游戏的开发和发展前景。 大逃杀游戏 大逃杀游戏是当下的一种新型游戏模式&#xff0c;旨在为玩家提供…

python django 生鲜商城管理系统

python django 生鲜商城管理系统,包含用户端和管理端 功能&#xff1a; 用户端&#xff1a;商城主页展示&#xff0c;登录&#xff0c;注册&#xff0c;用户中心&#xff0c;购物车&#xff0c;我的订单&#xff0c;购物车结算 管理端&#xff1a;登录&#xff0c;商品&…