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…

CSA 实现安全应用容器架构的最佳实践 课堂随笔

CSA 实现安全应用容器架构的最佳实践 编写背景 随着云计算和微服务架构的兴起&#xff0c;容器技术因其轻量级、可移植性和易于管理等优势成为现代应用部署的首选。然而&#xff0c;容器的安全性问题也随之凸显。云安全联盟&#xff08;Cloud Security Alliance, CSA&#xf…

Android基础-Kotlin语言的作用及优缺点

一、Kotlin语言的作用 Kotlin是一种由JetBrains公司开发的现代化静态类型编程语言&#xff0c;自其诞生以来&#xff0c;便在多个领域展现出了强大的应用潜力。其主要作用可以概括为以下几点&#xff1a; Android应用开发&#xff1a;Kotlin作为Android开发的官方推荐语言&am…

dockerfile关键字

参考&#xff1a;59_Dockerfile保留字简介_哔哩哔哩_bilibili FROM 作用&#xff1a;指定基础镜像&#xff0c;即在这个基础镜像上构建新镜像&#xff0c;如下所示&#xff0c;表示在ubuntu20.04镜像的基础上构建新镜像 FROM ubuntu:20.04 MAINTAINER 作用&#xff1a;镜像…

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…

网络通讯聊天工具的实现v2

在原有基础上加入文件的传输功能。 从客户端传送到服务器后&#xff0c;服务器接受文件&#xff0c;再转发给其他客户端&#xff0c;客户端接受后服务器删除文件。 涉及文件的读取与关闭。 1.原来传输的改进 1.1服务器需要区分传输的是文件还是信息。 在传输之前先传输一个…

Linux基础指令用户管理002

继Linux基础指令用户管理001我们讲述了创建用户和删除用户&#xff0c;我们讲一下如何设置用户密码以及修改用户信息。 操作系统 CentOS Stream 9 设置用户密码 我们使用passwd指令passwd name [rootlocalhost ~]# passwd wg 更改用户 wg 的密码 。 新的密码&#xff1a; …

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

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

通过LLM多轮对话生成单元测试用例

通过LLM多轮对话生成单元测试用例 代码 在采用 随机生成pytorch算子测试序列且保证算子参数合法 这种方法之前,曾通过本文的方法生成算子组合测试用例。目前所测LLM生成的代码均会出现BUG,且多次交互后仍不能解决.也许随着LLM的更新,这个问题会得到解决.记录备用。 代码 impo…

Inno Setup 深入浅出-文件的显示

【1】在需要打包的文件中&#xff0c;新建一个文本文件&#xff0c;如License.txt 注意&#xff1a;中文的编码格式需要GB2312&#xff0c;否则显示乱码 【2】读取、显示文本 [Code] procedure Init_ShowLicense(); var tmpFont:TFont; begin editLicense : TMemo.C…

OpenFHE 源码解析:BinFHE 部分

参考文献&#xff1a; [ABB22] Al Badawi A, Bates J, Bergamaschi F, et al. Openfhe: Open-source fully homomorphic encryption library[C]//Proceedings of the 10th Workshop on Encrypted Computing & Applied Homomorphic Cryptography. 2022: 53-63.openfheorg/o…

算法训练营day43

题目1&#xff1a;343. 整数拆分 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int integerBreak(int n) {vector<int> dp(n 1, 0);dp[2] 1;for(int i 3;i < n;i) {for(int j 1;j < i;j ) {// j * (i - j)相当于拆分成两个数// j * dp[i …

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

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

kotlin基础之泛型和委托

Kotlin泛型的概念及使用 泛型概念 在Kotlin中&#xff0c;泛型&#xff08;Generics&#xff09;是一种允许在类、接口和方法中使用类型参数的技术。这些类型参数在实例化类、实现接口或调用方法时会被具体的类型所替代。泛型的主要目的是提高代码的复用性、类型安全性和可读…

oracle翻页查询的小坑记录

oracle的查询&#xff0c;因为能获取到查询结果的rownum&#xff0c;就想着直接在查询条件后面做翻页&#xff0c;而且首页确实是正常查询到了。后面才发现翻页是空的。。。 这是因为rownum排序是在查询结果才分配的。所以应该把查询结果作为子查询&#xff0c;在外查询应用排序…

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

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

Windows配置java环境JDK

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

短信平台-平台群发短信

时代的进步带来了我们生活的便利&#xff0c;而其中最受欢迎和广泛应用的方式之一就是通过短信传递信息。在这个飞速发展的数字时代&#xff0c;我们需要一个高效、可靠的短信平台来满足不断增长的通讯需求。而今天&#xff0c;我要向大家推荐的正是这样一款卓越的短信平台——…