vue 功能:点击增加一项,点击减少一项

news2024/10/7 16:21:09

功能介绍:

默认为一列,当点击右侧"+" 号,增加一列;点击 “-” 号,将当前列删除;

功能截图:

请添加图片描述

功能代码:

//HTML
<el-col :span="24">
	<el-form-item label="通道列表:" prop="mobile">
		<div class="passStreamList">
			<div class="container" v-for="(item,key) in formDialog.form.passStreamList">
				<el-input v-model="item.code" type="text" class="dialogFormInputStyle dmzcode" clearable placeholder="编号,只能为数字类型"></el-input> 
				<div class="span"> - </div> 
				<el-input v-model="item.name" type="text" class="dialogFormInputStyle dmzname" clearable placeholder="请输入通道名称"></el-input> 
				<div class="span"> - </div> 
				<el-select v-model="item.type" class="dialogFormInputStyle dmztype" style="width:20%">
					<el-option v-for="item1 in formDialog.dmzType" :key="item1.id" :label="item1.type" :value="item1.id" placeholder="站类型">
						<span style="float: left;font-size: 12px">{{item1.type}}</span>
					</el-option>
				</el-select>
				<div class="dmzbutton">
					<span class="add" @click="passStreamAdd">+</span>
					<span class="reduce" @click="passStreamReduce(key)">-</span>
				</div>
			</div>
		</div>
	</el-form-item>
</el-col>

//css
 .passStreamList{
	 width:100%;
	 .container{
		 width:100%;
		 display:flex;
		 flex-direction: row;
		 justify-content: space-between;
		 .dmzcode,.dmzname{
			width:28%;
			cursor: pointer;
		 }
		 div.span{
			 color:#fff;
		 }
		 .dmztype{
			width:20%;
			cursor: pointer;
		 }
		 .dmzbutton{
			 display:flex;
			 justify-content: space-around;
			 align-items: center;
			 span{
				 width:25px;
				 height:25px;
				 font-size:20px;
				 background:rgba(155,226,254,0.5);
				 border: 1px solid #9BE2FE;
				 cursor: pointer;
				 color:#fff;
				 text-align:center;
				 line-height:25px;
			 }
			 span:last-child{
				 margin-left:10px;
			 }
		 }
	 }
 }

data(){
	return {
		formDialog:{
			form:{
				passStreamList:[{}],
			}
		}
	}
},

//增加
passStreamAdd(){
	this.formDialog.form.passStreamList.push({})
},

//减少
passStreamReduce(index){
	let newArr = [];
	//为一层时禁止减
	if(this.formDialog.form.passStreamList.length == 1){ return; }
	if(index == 0){   
		//为首
		newArr = this.formDialog.form.passStreamList.slice( 1,this.formDialog.form.passStreamList.length)
	}else if(index == this.formDialog.form.passStreamList.length-1){  
		//为尾
		newArr = this.formDialog.form.passStreamList.slice( 0,this.formDialog.form.passStreamList.length-1)
	}else{  
		//为中
		let arr1 = this.formDialog.form.passStreamList.slice( 0,index)
		let arr2 = this.formDialog.form.passStreamList.slice( index+1, this.formDialog.form.passStreamList.length)
		newArr = arr1.concat(arr2)
	}
	this.formDialog.form.passStreamList = [].concat(newArr);
},

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

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

相关文章

【分享】网段扫描攻击

【微|信|公|众|号&#xff1a;厦门微思网络】 攻击简介 如果网络中有用户向设备发送大量目标IP地址不能解析的IP报文&#xff08;即路由表中存在该IP报文的目的IP对应的路由表项&#xff0c;但设备上没有该路由表项中下一跳对应的ARP表项&#xff09;&#xff0c;将导致设备触发…

企业faq系统搭建平台Baklib,企业自定义管理平台

FAQ是当前网络上提供在线帮助的主要手段&#xff0c;通过事先组织好一些可能的常见问题的问答&#xff0c;发布在网页上为用户提供咨询服务。许多的Web用户都更加偏向于可信赖的FAQ页面&#xff0c;以此作为快速查找更多信息的方法。因为用户时间的紧缺&#xff0c;并且想知道产…

SAP通过函数READ_TEXT读取长文本

1.查看文本表头信息 事务码VF02, Goto->Item->Item Texts 双击空白文本 Goto -> Header 然后我们就可以得到文本的表头信息 已有文本读文本 IF is_xvbrp-vbeln IS INITIAL.lv_source_tdname XXXXXXXXXX.ELSE.lv_source_tdname is_xvbrp-vbeln && is_xvb…

HNU小学期工训-STC15单片机模型大作业实验报告

STC15单片机模型大作业实验报告 全称&#xff1a;基于STC15单片机与OLED显示模块&PC端演示的多功能声光温振时钟智能手表模型 计科210X 甘晴void 202108010XXX 【请注意&#xff1a;本作业入选优秀范例&#xff0c;直接照抄源码有很大风险】 【建议理解原理之后作改动】 …

一周AIGC丨国内首个估值 100 亿级大模型独角兽诞生,腾讯混元、蚂蚁金融大模型亮相...

成立于 2019 年的智谱 AI 晋升为国内首个估值超 100 亿人民币的大模型领域独角兽。“早一个月把电灯泡拿出来&#xff0c;不重要”的腾讯&#xff0c;最终还是免不了随大流&#xff0c;腾讯混元大模型正式推出&#xff0c;但用户还要排队申请。蚂蚁金融大模在外滩大会亮相&…

常见Web安全技术总结!474页Web安全从入门到精通(附PDF)

Web安全范围比较大&#xff0c;知识点比较杂&#xff0c;很多朋友都无从下手&#xff0c;这不可怕&#xff0c;可怕的是乱下手&#xff0c;其实往往基础才是决定你是否能走远的关键。 为了帮助大家入门网安&#xff0c;给大家推荐一份《新手Web安全入门到精通》&#xff0c;共…

ConcurrentHashMap源码分析

特性 ConcurrentHashMap 是线程安全的hashmap jdk1.8后结构图 Node 数组 链表 / 红黑树。当冲突链表达到一定长度时&#xff0c;链表会转换成红黑树 初始化 /*** Initializes table, using the size recorded in sizeCtl.*/ private final Node<K,V>[] initTable() …

港联证券:美联储加息对股市的影响?

作为美国金融体系的支柱组织&#xff0c;美联储常常因为它的钱银政策而成为媒体焦点。近年来&#xff0c;跟着美联储加息的脚步加快&#xff0c;这一论题也变得更加抢手&#xff0c;尤其是关于投资者而言&#xff0c;美联储加息是否会对股市发生影响成为了他们关怀的重要问题。…

【论文笔记】Baidu Apollo EM Motion Planner

文章目录 AbstractI. INTRODUCTIONA. Multilane StrategyB. Path-Speed Iterative AlgorithmC. Decisions and Traffic Regulations II. EM PLANNER FRAMEWORK WITH MULTILANE STRATEGYIII. EM PLANNER AT LANE LEVELA. SL and ST Mapping (E-step)B. M-Step DP PathC. M-Step …

什么是GPT?初学者如何使用GPT?GPT入门学习

灵魂发问&#xff1f; GPT科研中没有那么神&#xff1f; GPT账号不能轻松使用&#xff1f; GPT怎样才融合到我的科研中&#xff1f; 别人用的非常酷&#xff0c;为什么我用的不行&#xff1f; 让GPT成为您的科研加速器&#xff01; GPT对于每个科研人员已经成为不可或缺的辅助…

ruoYi图片上传

一 简述 使用ruoyi的代码生成功能&#xff0c;设置字段显示类型为 “图片上传” &#xff0c;生成各层代码即可 二 步骤示例 1. 打开代码生成模块 2. 修改展示类型为“图片上传” 3. 生成代码

【autodl/linux配环境心得:conda/本地配cuda,cudnn及pytorch心得】

linux配环境心得&#xff1a;conda/本地配cuda&#xff0c;cudnn及pytorch心得 我们服务器遇到的大多数找不到包的问题一&#xff0c;服务器安装cuda和cudnn使用conda在线安装cuda和cudnn使用conda进行本地安装检查conda安装的cuda和cudnn本地直接安装cuda和cudnn方法一&#x…

jeesite实现excel导入功能(保姆级图文教程)

文章目录 前言一、准备工作1.准备一个excel模板,放入static目录2.application.yml文件中设置文件存储路径3.使用easyexcel插件解析excel数据,pom文件导入easyexcel二、使用步骤1.列表页添加下载模板按钮2.表单页添加文件上传3. 创建excel解析对应实体4.后台完成文件上传代码,…

请体验一下falcon 180b 大语言模型的感觉

引言 由Technology Innovation Institute(T四训练的开源大模型Falcon 180B登陆Hugging Face!Falcon180B为开源大模型树立了全新的标杆。作为当前最大的开源大模型&#xff0c;有l80B参数并且是在在3.5万亿token的TII RefinedWeb数据集上进行训练&#xff0c;这也是目前…

冠达管理:减肥药概念再度爆发,常山药业两连板,翰宇药业等大涨

减肥药概念12日盘中再度拉升&#xff0c;到发稿&#xff0c;常山药业“20cm”涨停&#xff0c;翰宇药业涨超14%&#xff0c;德展健康涨停&#xff0c;金凯生科涨近9%&#xff0c;争气股份、普利制药、昊帆生物涨约5%&#xff0c;诺泰生物、圣诺生物、华森制药等涨超4%。 常山药…

AI数字人软件系统开发框架

AI数字人&#xff08;AI Digital Human&#xff09;开发涉及到多个领域&#xff0c;包括自然语言处理、计算机视觉、声音合成、人机交互等。以下是一些用于开发AI数字人的开发框架和工具&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开…

2023贵州MES与ERP协同配合信息化解决方案,结合应用优势研究-亿发

在当今竞争激烈的商业环境中&#xff0c;企业转型升级已经成为生存和发展的重要选择。而在这一过程中&#xff0c;ERP生产管理和智能制造MES系统的融合应用成为推动智能制造的关键引擎&#xff0c;为企业带来了优势。 ERP系统的作用&#xff1a; ERP系统是企业管理的重要部分&…

openpnp - 二手西门子电动飞达 - 物料编带安装的正确姿势

文章目录 openpnp - 二手西门子电动飞达 - 物料编带安装的正确姿势概述将料头用接料引带加长接料引带的规格将编带送入飞达的编带导引槽物料正常载入完成的子飞达没有错误指示灯END openpnp - 二手西门子电动飞达 - 物料编带安装的正确姿势 概述 手头一堆2手的西门子电动飞达…

手工测试项目实战

功能测试实战 项目介绍及说明 项目部署 开发语言 web服务器 asp IIS php apache java comcat 将其放在网站上&#xff0c;映射地址 查看文件中是否有相对路径…/文件表示方式&#xff0c;有的话需要启用父路径&#xff0c;并点击应用 项目为32位&#xff0c;但win7虚拟机…

.Net JIT二进制骚操DHVM破解篇

前言 经研究&#xff0c;号称最强.Net加密软件DNGuard HVM(以下简称DHVM)&#xff0c;五行代码基本上可以优雅的破解它&#xff0c;本篇看下。友情提示&#xff0c;以下全是二进制汇编骚操&#xff0c;慎入。原文:.Net JIT二进制骚操DHVM破解篇 概括 示例&#xff1a; 非常…