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

新增一个数组传递给后端

实现的效果:
在这里插入图片描述
页面

<div style="margin-bottom: 10px" v-if="totalPrice"><p style="font-weight: bolder;margin-bottom: 10px">支付计划<el-button type="text" size="small" @click="addPayInfo" icon="el-icon-plus">添加</el-button></p><ul v-for="(p,i) of payList" :key="i" class="pay-info"><li><span>{{i+1}}笔支付金额:</span><el-input v-model="p.price"@input="handleInput($event,i,'pay');onCalculate(p,i,createParams.commodityList[0].price)":disabled="!mark && p.is_amend"style="width: 200px;margin-right: 10px" size="small"></el-input></li><li><el-switchstyle="display: block"v-model="p.is_pay":disabled="!mark && p.is_amend"active-color="#13ce66"inactive-color="#ff4949"active-text="已支付"inactive-text="未支付"></el-switch></li><li><span style="vertical-align: top">备注:</span><el-input type="textarea" v-model="p.desc" :disabled="!mark && p.is_amend" style="width: 200px;margin-right: 10px" size="small"></el-input></li><li><el-button type="danger" size="mini" @click="deletePayInfo(i)" :disabled="!mark && p.is_amend" v-if="payList.length>1">删除</el-button></li></ul><div><span>需支付总价:{{totalPrice}}</span><span style="margin-left: 20px;color:#67C23A ">已计划支付总价:{{payTotal}}</span><span style="margin-left: 20px;color:#F56C6C " >未计划支付总价:<span style="color: #409EFF;cursor: pointer" @click="showUnPayTotal(unPayTotal)">{{unPayTotal}}</span></span></div></div>
data:{totalPrice : 300 //总金额payList : [{price: '',desc:'',is_pay: false}] //传递给后端的数组
}

数组内增加数据

addPayInfo(){this.payList.push({price: '',desc:'',is_pay: false})},

数组内删除数据

deletePayInfo(i){this.payList.splice(i,1)let sum = this.payList.reduce(function(acc, obj) {return acc + Number(obj.price);}, 0);this.payTotal = sum>Number(totalPrice)?0:sumthis.unPayTotal = Number(totalPrice) - this.payTotal},

剩余金额点击后直接赋值到未输入金额的输入框内

  showUnPayTotal(val){console.log(val)if(val>0 && this.payList.find(item=>item.price==='')){this.payList.find(item=>item.price==='').price = valthis.unPayTotal = 0}},

输入框值改变后执行

    handleInput(val,index,type){let dat = ("" + val) // 第一步:转成字符串.replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉.replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字.replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全.match(/^\d*(\.?\d{0,2})/g)[0] || "";if(type==='commodity'){this.totalPrice = datthis.unPayTotal = Number(dat) - this.payTotal}else if(type==='pay'){this.payList[index].price = dat}},

相关文章:

新增一个数组传递给后端

实现的效果&#xff1a; 页面 <div style"margin-bottom: 10px" v-if"totalPrice"><p style"font-weight: bolder;margin-bottom: 10px">支付计划<el-button type"text" size"small" click"addPayInf…...

Flutter集成Firebase中的Realtime Analytics

实时分析&#xff08;Realtime Analytics&#xff09;的功能 实时数据更新&#xff1a;Firebase实时分析提供实时数据更新&#xff0c;让开发者可以实时了解应用程序的使用情况&#xff0c;包括活跃用户数量、事件触发次数等指标自定义事件跟踪&#xff1a;开发者可以通过自定…...

2024国赛数学建模A题B题C题D题E题思路资料模型

开始在本帖实时更新2024国赛数学建模赛题思路代码&#xff0c;文章末尾获取&#xff01; 持续更新参考思路...

C语言字面量和常量

目录 引言 1. 字面量 1.1 字符字面量 1.2 整型字面量 1.3 浮点字面量 2. 常量 2.1 使用预处理器指令 #define 定义常量 2.1.1 语法格式 2.1.2 使用举例 2.2 使用 const 关键字定义常量 2.3 使用 #define 和 const 定义常量的区别 引言 看了一些博文&#xff0c;有的文…...

视频结构化从入门到精通——行为分析类应用

行为分析类应用 1. 认识行为分析 监控/判断视频画面中目标的运动过程、携带属性等。从数据中自动识别、跟踪和理解人类或物体行为。 1. 车的行为分析应用 车辆行为分析主要用于监控和管理车辆的动态行为&#xff0c;广泛应用于智能交通、城市管理和安全监控。关键应用包括&…...

Redis的KeyExpirationEventMessageListener键过期监听器

MessageListener通过监听key过期的Redis keyspace通知&#xff0c;然后通过ApplicationEventPublisher发布RedisKeyExpiredEvent事件的模式进行事件监听和广播。 redis.conf地址&#xff1a;https://github.com/redis/redis/blob/unstable/redis.conf Redis官方地址&#xff1…...

MP4视频压缩,推荐这五大压缩操作

MP4视频压缩&#xff0c;在当今数字化的时代&#xff0c;视频已经成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;随着视频分辨率和长度的增加&#xff0c;MP4文件的大小也变得越来越大&#xff0c;这不仅占用了大量的存储空间&#xff0c;还使得传输和分享变得困…...

docker 安装NextERP

有很多方式&#xff1a; 一 docker sudo docker run -itd -p 8016:80 -v ERPNext_db:/var/lib/mysql -v ERPNext_sites:/home/frappe/frappe-bench/sites --name ERPNext lvxj11/erpnext:latest二 git clone https://e.coding.net/yuanerp/yuanerp/frappe_docker.gitcp exa…...

Android 存储之 SharedPreferences 框架体系编码模板

一、SharedPreferences 框架体系 1、SharedPreferences 基本介绍 SharedPreferences 是 Android 的一个轻量级存储工具&#xff0c;它采用 key - value 的键值对方式进行存储 它允许保存和读取应用中的基本数据类型&#xff0c;例如&#xff0c;String、int、float、boolean …...

弹性容器Flex中的自动外边距(Auto Margins) 的作用

最近在使用Flex布局时&#xff0c;遇到的一个情况&#xff1a; 有以下的代码&#xff1a; <div class"toolbox"><button id"decrease">-</button><span id"size">1</span><button id"increase">…...

C语言调用子函数时入/出栈(保护/恢复现场)全过程分析:以Cortex-M3为例

0 参考资料&工具 Cortex M3权威指南(中文).pdf keil5&#xff08;用于仿真查看寄存器、栈变化&#xff09;1 C语言调用子函数时出入/出栈&#xff08;保护/恢复现场&#xff09;全过程分析 使用C语言调用子函数是如何保护/恢复现场的呢&#xff1f;本文以Cortex-M3为例&a…...

理解Sigmoid激活函数原理和实现

Sigmoid 激活函数是一种广泛应用于机器学习和深度学习中的非线性函数&#xff0c;特别是在二分类问题中。它的作用是将一个实数值映射到(0, 1)区间&#xff0c;使得输出可以被解释为概率值&#xff0c;这在处理二分类问题时非常有用。 Sigmoid 函数的定义 Sigmoid 函数的数学…...

探秘DevSecOps黄金管道,安全与效率的完美融合

软件应用的安全性已成为企业和用户关注的焦点&#xff0c;DevSecOps作为一种将安全融入开发和运维全过程的理念和实践&#xff0c;旨在消除传统开发模式中安全被后置处理的弊端。DevSecOps黄金管道&#xff08;Golden Pipeline&#xff09;是实现这一理念的核心框架&#xff0c…...

Redis的内存淘汰策略- volatile-lru

volatile-lru 策略简介 在 volatile-lru 策略下&#xff0c;当 Redis 的内存使用达到配置的上限&#xff08;maxmemory&#xff09;时&#xff0c;它会优先删除那些设置了过期时间的键&#xff0c;并且选择最近最少使用的键进行删除。LRU 算法的核心思想是&#xff0c;优先删除…...

HTTP和HTTPS的区别?哪一个更适合你的网站?

什么是 HTTP&#xff1f; HTTP&#xff08;超文本传输协议&#xff09;&#xff08;Hypertext Transfer Protocol&#xff09;它是一组允许网络浏览器与网络服务器&#xff08;托管网站的计算机&#xff09;进行通信的规则。 HTTP 使用请求-响应模型。 例如&#xff0c;当你…...

OpenAI SORA团队负责人 通往智能的方式 报告笔记

OpenAI SORA团队负责人 通往智能的方式 报告笔记 这个报告其实是2024年智源大会的主旨报告&#xff0c;OpenAI SORA和DALL-E团队负责人Aditya Ramesh给出的一段有关多模态大模型的报告。我去听了现场&#xff0c;感觉倍受启发&#xff0c;但是感觉很多并不能当场理解&#xff…...

006-Sleuth(Micrometer)+ZipKin分布式链路追踪

这里写目录标题 1 分布式链路追踪概述1.1 为什么会出现这个技术&#xff1f;需要解决哪些问题&#xff1f;1.2 在分布式与微服务场景下需要解决的问题 2 新一代Spring Cloud Sleuth&#xff1a;Micrometer2.1 官网重要提示2.1.1 新一代Sleuth2.1.2 官网2.1.3 说明2.1.3.1 老项目…...

AI模型:追求全能还是专精?-- 之6 语言复杂度类别(Category 0~3 类)和语言功能性类型(Type 0~Ⅲ 型)之2

Q17、我前面说过&#xff0c;语言复杂度的0~3级&#xff08;Category 0~3&#xff09;表示了语言的的上下文相关性 &#xff1a; 完全不相关&#xff0c; 单相关的 单词上下文&#xff0c; 双相关的句子上下文 全相关的文章上下文 。我准备翻译为 Context - irrelative /relati…...

20240907 每日AI必读资讯

大疆发布 DJI Neo 掌上 Vlog 无人机&#xff01; - DJI Neo 是 DJI 迄今最轻、最小的无人机&#xff0c;无需遥控器&#xff0c;掌上起降即可轻松拍出主角大片… &#xff5c;135 克轻巧便携 丨零门槛掌上起降 丨AI 智能跟拍 &#xff0c;一键成片 丨多种操控&#xff0c;丰富…...

深度学习基础--卷积基础模块

本节主要关注卷积神经网络发展过程中具有里程碑意义的基础模块&#xff0c;了解它们的原理和设计细节 1. 批归一化 在机器学习中&#xff0c;一般会假设模型的输入数据的分布是稳定的。如果这个假设不成立&#xff0c;即模型输入数据的分布发生变化&#xff0c;则称为协变量偏…...

基于LM22678的树莓派硬盘专用电源设计:解决供电不稳与电流冲击

1. 项目概述&#xff1a;为什么我们需要一个“专用”电源&#xff1f;如果你正在用树莓派搭配一块机械硬盘搭建一个家庭服务器或者个人云存储&#xff0c;可能已经遇到了一个不大不小的麻烦&#xff1a;供电不稳。树莓派官方推荐的5V/3A电源&#xff0c;单独带树莓派4B跑满负载…...

账务台账数据

银行里说的 “账务台账数据”&#xff0c;本质就是按会计规则把每笔业务逐笔、分户、分科目记下来的完整明细流水 余额 辅助信息&#xff0c;核心是 “可逐笔追溯、可对账、可审计” 的一套明细数据。下面用通俗、具体的方式拆开说&#xff1a;一、银行 “账务台账” 到底是什…...

终极Node.js Mock工具:Mockery入门到精通实战教程

终极Node.js Mock工具&#xff1a;Mockery入门到精通实战教程 【免费下载链接】mockery Simplifying the use of mocks with Node.js 项目地址: https://gitcode.com/gh_mirrors/mock/mockery Mockery是Node.js生态中简化Mock使用的终极工具&#xff0c;它为开发者提供了…...

告别鼠标点击,微博图片批量下载的轻松方案

告别鼠标点击&#xff0c;微博图片批量下载的轻松方案 【免费下载链接】weiboPicDownloader Download weibo images without logging-in 项目地址: https://gitcode.com/gh_mirrors/we/weiboPicDownloader 还记得那个周末的下午吗&#xff1f;你喜欢的博主发布了九宫格美…...

收藏|2026年AI大模型就业爆发!岗位暴涨12倍、月薪6W+,小白零基础入门指南

2026年&#xff0c;AI已从“科技热点”彻底变为职场“刚需赛道”&#xff01;脉脉高聘人才智库最新发布的《2026年1-2月中高端人才求职招聘洞察》&#xff0c;用硬核数据揭示行业真相&#xff1a;AI人才成招聘市场顶流&#xff0c;岗位量、薪资双双爆发式增长。尤其对零基础小白…...

Taotoken的稳定性与低延迟在实时对话应用中的实际体验

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken的稳定性与低延迟在实时对话应用中的实际体验 在开发需要快速响应的AI聊天应用时&#xff0c;后端API的稳定性和延迟表现是…...

计算机视觉的实战项目:从0到1搭建属于自己的图像识别系统

作为软件测试从业者&#xff0c;我们每天都在和各类功能验证、兼容性测试、自动化测试框架打交道&#xff0c;对AI领域的实战项目往往觉得“门槛高”“和日常工作不沾边”。但随着AI技术在互联网产品中的落地越来越深入&#xff0c;图像识别功能已经成为很多APP、智能硬件的核心…...

告别RaiDrive广告!用开源rclone+Alist,免费把阿里云盘/百度网盘变成电脑本地硬盘

开源方案实战&#xff1a;用rcloneAlist打造无广告的云盘本地化体验 每次打开RaiDrive时弹出的广告窗口是否让您感到困扰&#xff1f;商业软件的收费模式是否让您犹豫不决&#xff1f;今天&#xff0c;我们将彻底解决这些问题。通过开源工具Alist和rclone的组合&#xff0c;您不…...

C++的单例模式及其作用

什么是单例模式&#xff1f;无论是在面向对象编程还是软件架构中&#xff0c;单例模式都扮演着至关重要的角色。它不仅能够确保一个类只有一个实例存在&#xff0c;还能够提供全局访问点&#xff0c;使得我们可以方便地在程序的任何地方使用该实例。但有几个设计模式并非解决抽…...

HSTracker:macOS上炉石传说玩家的免费智能助手终极指南

HSTracker&#xff1a;macOS上炉石传说玩家的免费智能助手终极指南 【免费下载链接】HSTracker A deck tracker and deck manager for Hearthstone on macOS 项目地址: https://gitcode.com/gh_mirrors/hs/HSTracker 还在为炉石传说对战中记不住对手卡牌而烦恼吗&#x…...