当前位置: 首页 > news >正文

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

功能介绍:

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

功能截图:

请添加图片描述

功能代码:

//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);
},

相关文章:

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

功能介绍&#xff1a; 默认为一列&#xff0c;当点击右侧"" 号&#xff0c;增加一列&#xff1b;点击 “-” 号&#xff0c;将当前列删除&#xff1b; 功能截图&#xff1a; 功能代码&#xff1a; //HTML <el-col :span"24"><el-form-item lab…...

我的编程学习笔记

1. 引言&#xff1a; 在开始编写任何代码之前&#xff0c;都需要理解编程的基本概念。编程是人与计算机进行交流的方式&#xff0c;它让计算机可以理解和执行特定的任务。编程语言是这种交流的工具&#xff0c;而学习编程就是学习如何用特定的语言表达出我们想要的计算机行为。…...

页面静态化、Freemarker入门

页面静态化介绍 页面的访问量比较大时&#xff0c;就会对数据库造成了很大的访问压力&#xff0c;并且数据库中的数据变化频率并不高。 那需要通过什么方法为数据库减压并提高系统运行性能呢&#xff1f;答案就是页面静态化。页面静态化其实就是将原来的动态网页(例如通过ajax…...

PCL (再探)点云配准精度评价指标——均方根误差

目录 一、算法原理二、代码实现三、代码解析四、备注本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 见: 点云配准精度评价指标——均方根误差PCL 点云配准精度评价——点到面的均方根误差Open3D(C++) 点…...

【Redis速通】基础知识1 - 虚拟机配置与踩坑

Ubuntu 配置 Redis 下载 redis 找到 redis 官网界面&#xff0c;下载 redis6.2LTS 点击前往 用 mobax 连接到 ubuntu 虚拟机&#xff0c;把下载好的 tar.gz 文件丢到任意一个文件夹下面 进入该文件夹&#xff0c;于此处打开终端&#xff0c;进行解压操作&#xff1a;tar -z…...

我的创作纪念日---从考研调剂到研一的旅程

文章目录 一、前言二、机缘三、收获四、日常五、憧憬 一、前言 大家好&#xff0c;我是小馒头学Python&#xff0c;小馒头学Python就是我&#xff0c;今天是我第一次收到创作纪念日的私信&#xff0c;去年的今天我还在考研&#xff0c;那个时候整天浑浑噩噩的&#xff0c;迷茫…...

Python-实现邮件发送:flask框架或django框架可以直接使用

在项目中&#xff0c;会使用到发送邮件的功能。不同框架的配置可能有所不同&#xff0c;直接写一个不依赖框架配置的邮件发送模块。 使用的功能&#xff1a; 1、可以发送给多个邮箱 2、可以实现抄送多个邮箱 3、可以添加多个文件附件 一、不使用多线程 import smtplib from…...

使用亚马逊云科技Amazon SageMaker,为营销活动制作广告素材

广告公司可以使用生成式人工智能和文字转图像根基模型&#xff0c;制作创新的广告素材和内容。在本篇文案中&#xff0c;将演示如何使用亚马逊云科技Amazon SageMaker从现有的基本图像生成新图像&#xff0c;这是一项完全托管式服务&#xff0c;用于大规模构建、训练和部署机器…...

conda环境安装opencv带cuda版本

主要是cmake编译选项需要修改 以下两个选项按照自己情况修改 -D OPENCV_EXTRA_MODULES_PATH../opencv_contrib/modules \ -D CUDA_TOOLKIT_ROOT_DIR/usr/local/cuda-12.2 \ 其中/home/lixin/anaconda3/envs/stereo 改成你自己的conda环境 cmake -D CMAKE_BUILD_TYPER…...

R语言中的数据结构----矩阵

目录 &#xff08;1&#xff09;创建矩阵 &#xff08;2&#xff09; 线性代数运算 &#xff08;3&#xff09;矩阵索引 &#xff08;4&#xff09;矩阵元素的筛选 &#xff08;5&#xff09;增加或删除矩阵的行或列 &#xff08;6&#xff09;apply()函数 &#xff08;…...

Llama-2 推理和微调的硬件要求总结:RTX 3080 就可以微调最小模型

大语言模型微调是指对已经预训练的大型语言模型&#xff08;例如Llama-2&#xff0c;Falcon等&#xff09;进行额外的训练&#xff0c;以使其适应特定任务或领域的需求。微调通常需要大量的计算资源&#xff0c;但是通过量化和Lora等方法&#xff0c;我们也可以在消费级的GPU上…...

C++多线程的用法(包含线程池小项目)

一些小tips: 编译命令如下&#xff1a; g 7.thread_pool.cpp -lpthread 查看运行时间&#xff1a; time ./a.out 获得本进程的进程id&#xff1a; this_thread::get_id() 需要引入的库函数有&#xff1a; #include<thread> // 引入线程库 #include<mutex> //…...

react ant ice3 实现点击一级菜单自动打开它下面最深的第一个子菜单

1.问题 默认的如果没有你的菜单结构是这样的&#xff1a; [{children: [{name: "通用配置"parentId: "1744857774620672"path: "basic"}],name: "系统管理"parentId: "-1"path: "system"} ]可以看到每层菜单的p…...

关于 Qt串口不同电脑出现不同串口号打开失败 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/132842297 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…...

可观测性在灰度发布中的应用

前言 随着云计算的发展、云原生时代的来临&#xff0c;企业数字化转型进程不断深入&#xff0c;应用开发也越来越多地基于微服务化模式&#xff0c;快速迭代的能力使得应用开发更高效、更灵活。同时&#xff0c;也不得不面临应用版本快速升级所带来的的巨大挑战。 传统的发布方…...

vscode开发油猴插件环境配置指南

文章目录 一、环境配置1.1油猴插件开始编写代码1.2油猴插件配置1.2.1浏览器插件权限1.2.2插件自身权限 2. 油猴脚本API学习2.1 头文件2.2 油猴API 一、环境配置 1.1油猴插件开始编写代码 在vscode 中写入如下代码‘ // UserScript // name cds_test // namespace …...

网站不收录没排名降权怎么处理-紧急措施可恢复网站

网站降权对于SEO人员来说是非常致命的打击&#xff0c;因为网站一旦被搜索引擎降权&#xff0c;排名会严重地下降&#xff0c;网站的流量也会大幅下降&#xff0c;直接影响到收益。而且处理不好的话会导致恢复的时间周期无限拉长&#xff0c;所以网站被降权后我们要第一时间采取…...

C++vector模拟实现

vector模拟实现 1.构造函数2.拷贝构造3.析构赋值运算符重载4.iterator5.modifiers5.1push_back5.2pop_back5.3empty5.4insert5.5erase5.6swap 6.Capacity6.1size6.2capacity6.3reserve6.4resize6.5empty 7.Element access7.1operator[]7.2at 8.在谈reserve vector官方库实现的是…...

《DATASET DISTILLATION》

这篇文章提出了数据浓缩的办法&#xff0c;在前面已有的知识浓缩&#xff08;压缩模型&#xff09;的经验上&#xff0c;提出了不压缩模型&#xff0c;转而压缩数据集的办法&#xff0c;在压缩数据集上训练模型得到的效果尽可能地接近原始数据集的效果。 摘要 模型蒸馏的目的是…...

GDPU 数据结构 天码行空1

1. 病历信息管理 实现病历查询功能。具体要求如下: 定义一个结构体描述病人病历信息(病历号,姓名,症状)&#xff1b;完成功能如下: 输入功能:输入5个病人的信息&#xff1b; 查询功能:输入姓名&#xff0c;在5个病历中进行查找&#xff0c;如果找到则显示该人的信息&#xff0c…...

【C++】红黑树的模拟实现

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…...

【多线程】Thread 类 详解

Thread 类 详解 一. 创建线程1. 继承 Thread 类2. 实现 Runnable 接口3. 其他变形4. 多线程的优势-增加运行速度 二. Thread 类1. 构造方法2. 常见属性3. 启动线程-start()4. 中断线程-interrupt()5. 线程等待-join()6. 线程休眠-sleep()7. 获取当前线程引用 三. 线程的状态1. …...

LINUX 网络管理

目录 一、NetworkManager的特点 二、配置网络 1、使用ip命令临时配置 1&#xff09;查看网卡在网络层的配置信息 2&#xff09;查看网卡在数据链路层的配置信息 3&#xff09;添加或者删除临时的网卡 4&#xff09;禁用和启动指定网卡 2、修改配置文件 3、nmcli命令行…...

refresh rate

1920 x 1080 显卡刷新率 60...

使用 NGINX Unit 实施应用隔离

原文作者&#xff1a;Artem Konev - Senior Technical Writer 原文链接&#xff1a;使用 NGINX Unit 实施应用隔离 转载来源&#xff1a;NGINX 中文官网 NGINX 唯一中文官方社区 &#xff0c;尽在 nginx.org.cn NGINX Unit 特性集的最新动态之一是支持应用隔离&#xff0c;该特…...

2023/09/12 qtc++

实现一个图形类(Shape) &#xff0c;包含受保护成员属性:周长、面积&#xff0c; 公共成员函数:特殊成员函数书写 定义一个圆形类(Circle) &#xff0c;继承自图形类&#xff0c;包含私有属性:半径 公共成员函数:特殊成员函数…...

全科医学科常用评估量表汇总,建议收藏!

根据全科医学科医生的量表使用情况&#xff0c;笔者整理了10个常用的全科医学科量表&#xff0c;可在线评测直接出结果&#xff0c;可转发使用&#xff0c;可生成二维码使用&#xff0c;可创建项目进行数据管理&#xff0c;有需要的小伙伴赶紧收藏&#xff01; 日常生活能力量表…...

了解消息中间件的基础知识

为什么要使用消息中间件&#xff1f; 解耦&#xff1a;消息中间件可以使不同的应用程序通过解耦的方式进行通信&#xff0c;减少系统间的依赖关系提供异步通信&#xff1a;消息中间件可以实现异步消息传递&#xff0c;提高系统的响应性能。流量削峰&#xff1a;消息中间件可以…...

【linux】Linux wps字体缺失、加粗乱码解决

解决wps字体缺失问题 1、下载字体包 git clone https://github.com/iamdh4/ttf-wps-fonts.git2、创建单独放置字体的目录 mkdir /usr/share/fonts/wps-fonts3、复制字体到系统目录下 cp ttf-wps-fonts/* /usr/share/fonts/wps-fonts4、修改字体权限 chmod 644 /usr/share/f…...

每日两题 103二叉树的锯齿形层序遍历(数组) 513找树左下角的值(队列)

103 题目 103 给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff0c;层与层之间交替进行&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,…...

深圳网站制作开发/百度文库网页版

版本新增功能5.0.16增加文件日志自动清理功能支持5.0.13增加单文件日志写入功能5.0.10增加record_trace配置参数用于记录trace信息到日志5.0.4命令行模式下日志自动定时写入 debug日志类型仅用于调试模式记录手动记录 一般情况下&#xff0c;系统的日志记录是自动的&#xff0c…...

成都微网站开发/策划推广活动方案

今天&#xff0c;刚好要写开源项目的后台数据了&#xff0c;所以学习了一下php的命名空间&#xff0c;收获多多&#xff0c;所以总结了一下这篇文章&#xff0c;好了&#xff0c;废话不多说&#xff0c;上代码吧我们该如何命名空间呢&#xff1f;<?php // 使用命名空间的关…...

做瞹瞹嗳视频网站在线观看/网络营销招聘岗位有哪些

夜光序言&#xff1a; 即使身边满是凄荒、冷淡与麻木&#xff0c;风也会吹得柔和&#xff0c;心也能寻得一份温存 正文&#xff1a;接下来~~&#xff0c;实战项目&#xff1a;一个拥有答题页面的微信小程序 上图为实际效果图 那么如何制作出来呢~ 点击“开始测试”按钮&#x…...

淘宝网站建设可靠/广州日新增51万人

1. CtrlshiftV呼出历史拷贝数据 2. 拷贝纯文本右键---copy as plain text 3. 鼠标移动显示快速定义文档 4. 设置logcat颜色 5. Ctrl空格 智能匹配 6. fori---自动完成for语句 ret true;加上.就可以添加try catch语句...

博敏 网站开发/常见搜索引擎有哪些

前言 mysql肯定不是只有简简单单的CURD&#xff0c;当然CURD才是数据库的核心功能 但是在基础的功能之上&#xff0c;我们能做的就是如何去优化他&#xff0c;而索引就是优化查询的一个重要知识点 下面这一句索引无关 我觉得下面的图让我很快的理解的jion的使用以及定义 7种j…...

装饰网站建设运营/做网络推广

本文整理了与自动化机器学习相关的经典论文、开源工具、项目、免费经典书籍、会议、经典文章和其他资源的列表。 AutoML介绍 AutoML是使用机器学习方法和过程来自动化机器学习系统并使其更容易访问的相关的工具和技术。它存在了几十年&#xff0c;所以不是一个全新的想法。 Goo…...