vue+elemntui 加减表单框功能样式

       <el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="配置时间" prop="currentAllocationDate"><div v-for="(item,key) in timeList"><el-date-pickerv-model="item.time"type="datetimerange"value-format="timestamp"range-separator=""start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker><el-button class="add" @click="passStreamAdd">+</el-button><el-button class="reduce" @click="passStreamReduce(key)">-</el-button></div></el-form-item>
</el-form>
  data() {return {// 增加 or 减少时间 配置时间项timeList: [{}],form: {currentAllocationDate: ''}}}),watch: {timeList: {handler: function(val, oldVal) {this.form.currentAllocationDate = JSON.stringify(val)},immediate: true}},methods: {//增加passStreamAdd(){this.timeList.push({})},//减少passStreamReduce(index){let newArr = [];//为一层时禁止减if(this.timeList.length == 1){ return; }if(index == 0){//为首newArr = this.timeList.slice( 1,this.timeList.length)}else if(index == this.timeList.length-1){//为尾newArr = this.timeList.slice( 0,this.timeList.length-1)}else{//为中let arr1 = this.timeList.slice( 0,index)let arr2 = this.timeList.slice( index+1, this.timeList.length)newArr = arr1.concat(arr2)}this.timeList = [].concat(newArr);},}/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.timeList = [{}] // 注意这this.title = "添加平衡清零";},/** 修改按钮操作 */handleUpdate(row) {this.loading = true;this.reset();const id = row.id || this.idsgetBalancedZeroing(id).then(response => {this.loading = false;this.form = response.data;this.timeList = this.form.currentAllocationDate ?                JSON.parse(this.form.currentAllocationDate) : [{}]this.open = true;this.title = "修改平衡清零";});},

在这里插入图片描述

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

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

相关文章

高并发项目-用户登录基本功能

文章目录 1.数据库表设计1.IDEA连接数据库2.修改application.yml中数据库的名称为seckill3.IDEA创建数据库seckill4.创建数据表 seckill_user5.密码加密分析1.传统方式&#xff08;不安全&#xff09;2.改进方式&#xff08;两次加密加盐&#xff09; 2.密码加密功能实现1.pom.…

CI/CD(基于ESP-IDF)

主要参考资料 B站乐鑫信息科技《【乐鑫全球开发者大会】DevCon23 #15 &#xff5c;通过 CI/CD 进行流水线开发》 pytest-embedded乐鑫文档: https://docs.espressif.com/projects/pytest-embedded/en/latest/api.html 目录 CI/CD简介乐鑫内部CI/CD测试GitLab CI/CDGitHub Actio…

LabVIEW中实现Trio控制器的以太网通讯

在LabVIEW中实现与Trio控制器的以太网通讯&#xff0c;可以通过使用TCP/IP协议来完成。这种方法包括配置Trio控制器的网络设置、使用LabVIEW中的TCP/IP函数库进行数据传输和接收&#xff0c;以及处理通讯中的错误和数据解析。本文将详细说明实现步骤&#xff0c;包括配置、编程…

SheetJS V0.17.5 导入 Excel 异常修复 Invalid HTML:could not find<table>

导入 Excel 提示错误&#xff1a;Invalid HTML:could not find<table> 检查源代码 发现 table 属性有回车符 Overview: https://docs.sheetjs.com/docs/ Source: https://git.sheetjs.com/sheetjs/sheetjs/issues The public-facing websites of SheetJS: sheetjs.com…

装机必备——截图软件PixPin安装教程

装机必备——截图软件PixPin安装教程 软件下载 软件名称&#xff1a;PixPin 1.5 软件语言&#xff1a;简体中文 软件大小&#xff1a;30.1M 系统要求&#xff1a;Windows7或更高&#xff0c; 64位操作系统 硬件要求&#xff1a;CPU2GHz &#xff0c;RAM2G或更高 下载通道①迅…

搭建YOLOv10环境 训练+推理+模型评估

文章目录 前言一、环境搭建必要环境1. 创建yolov10虚拟环境2. 下载pytorch (pytorch版本>1.8)3. 下载YOLOv10源码4. 安装所需要的依赖包 二、推理测试1. 将如下代码复制到ultralytics文件夹同级目录下并运行 即可得到推理结果2. 关键参数 三、训练及评估1. 数据结构介绍2. 配…

【深度好文】AI企业融合联盟营销,做的好就是最大赢家!

AI工具市场正在迅速发展&#xff0c;现仍有不少企业陆续涌出&#xff0c;那么如何让你的工具受到目标群体的关注呢&#xff1f;这相比是AI工具营销人员一直在思考的问题。 即使这个市场正蓬勃发展&#xff0c;也无法保证营销就能轻易成功。AI工具虽然被越来越多人认可和接受&a…

Windows配置java环境JDK

配置jdk环境非常简单&#xff0c;大概有以下几步&#xff1a; 下载jdk安装&#xff0c;然后双击进行安装配置环境变量(也不是一定非要配置环境变量&#xff0c;配置环境变量的好处就是&#xff0c;在任何位置&#xff0c;系统都可以找到安装路径&#xff0c;非常实用且方便) …

连接远程的kafka【linux】

# 连接远程的kafka【linux】 前言版权推荐连接远程的kafka【linux】一、开放防火墙端口二、本地测试是否能访问端口三、远程kafka配置四、开启远程kakfa五、本地测试能否连接远程六、SpringBoot测试连接 遇到的问题最后 前言 2024-5-14 18:45:48 以下内容源自《【linux】》 仅…

leetcode-189. 旋转数组 原地递归算法(非官方的三种方法)

Problem: 189. 轮转数组 思路 首先&#xff0c;很明显&#xff0c;题目要求的操作等同于将数组的后k%n个元素移动到前面来。 然后我们思考原地操作的方法&#xff1a; &#xff08;为了方便讲解&#xff0c;我们先假设k<n/2&#xff09; 1.我们将数组划分为 [A&#xff0c;B…

pytorch学习day1

一.pytorch主要模块介绍 1.1 模块介绍 模块描述torch包含激活函数和主要的张量操作torch.Tensor定义了张量的数据类型&#xff0c;方法可返回新张量&#xff0c;方法后缀带下划线可修改张量本身torch.cuda定义了 CUDA 运算相关的函数&#xff0c;如检查 CUDA 是否可用&#x…

JetLinks物联网平台在windows 7搭建(前后端)部署教程

近期对接TCP、modbusTCP等自定义解析&#xff0c;做了很多万能解析的方法&#xff0c;却都不遂人意&#xff0c;而一直在用的ThingsBoard不能直接对接TCP透传(企业版除外)&#xff0c;需要在外围做一些自定义解析&#xff0c;然后转json再mqtt上传&#xff0c;感觉来说比较麻烦…

Android笔记--应用安装

这一节了解一下普通应用安装app的方式&#xff0c;主要是唤起系统来安装&#xff0c;直接上代码: 申请权限 <uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE"/><uses-permission android:name"android.permission.WRITE_EXT…

【包装类简单认识泛型】

目录 1&#xff0c;包装类 1.1 基本数据类型和对应的包装类 1.2 装箱和拆箱 2&#xff0c;什么是泛型 3&#xff0c;引出泛型 3.1 语法 4&#xff0c;泛型如何编译的 4.1 擦除机制 4.2 为什么不能实例化泛型类型数组 5&#xff0c;泛型的上界 5.1 语法 5.2 复杂示例…

Windows内核函数 - 添加、修改注册表键值

打开注册表的句柄后&#xff0c;就可以对该项进行设置和修改了。注册表是以二元形式存储的&#xff0c;即“键名”和“键值”。通过键名设置键值&#xff0c;而键值可以划分几个类&#xff0c;如下表所示。 表1 键值的分类 在添加和修改注册表键值的时候&#xff0c;要分类进行…

dp秒杀优惠券

1、全局id生成器 当用户抢购时&#xff0c;就会生成订单并保存到tb_voucher_order这张表中&#xff0c;而订单表如果使用数据库自增ID就存在一些问题&#xff1a; id的规律性太明显受单表数据量的限制 场景分析&#xff1a;如果我们的id具有太明显的规则&#xff0c;用户或者…

企业网站有必要进行软件测试吗?网站测试有哪些测试流程?

企业网站在现代商业中扮演着重要的角色&#xff0c;它不仅是企业形象的重要体现&#xff0c;也是与客户、合作伙伴进行沟通与交流的重要渠道。然而&#xff0c;由于企业网站的复杂性和关键性&#xff0c;其中可能存在各种潜在的问题和隐患。因此&#xff0c;对企业网站进行软件…

el-upload上传文件使用http-request方法,formdata传集合List到后台

el-upload上传文件 前言1、使用el-upload上传文件1.1代码演示1.2回显列表2、formdata传集合List到Springboot后台前言 在使用el-upload上传文件,会遇到必须使用:action="upload_url"远端链接的问题,本章我们讲解怎样不适用远端链接,通过上传获取到本地的file文件…

海尔智家牵手罗兰-加洛斯,看全球创牌再升级

晚春的巴黎西郊&#xff0c;古典建筑群与七叶树林荫交相掩映&#xff0c;坐落于此的罗兰加洛斯球场内座无虚席。 来自全球各地的数万观众&#xff0c;正与场外街道上的驻足者们一起&#xff0c;等待着全世界最美好的网球声响起…… 当地时间5月26日&#xff0c;全球四大职业网…

RFM模型-分析母婴类产品

1&#xff0c;场景描述 假设我们是某电商平台的数据分析师&#xff0c;负责分析母婴产品线的用户数据。母婴产品的购买行为具有一定的周期性和生命周期特征&#xff0c;如用户在不同怀孕阶段的需求不同&#xff0c;以及宝宝出生后的不同成长阶段需要不同的产品。 2&#xff0…