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

uniapp heckbox-group实现多选

文章目录

  • html 代码
  • JS 代码

混了业务逻辑,谨慎观看

html 代码

<view><!--可滚动视图区域。用于区域滚动 --><scroll-view :style="{ height: clientHeight + 'px' }" :scroll-top="scrollTop" scroll-y="true"@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"><!--多项选择器--><checkbox-group @change="checkboxChange"><!-- 多内容pendingList 卡片 --><view v-for="(item, index) in pendingList" :key="index"><uni-card :title="item.deliveryCode" :extra="item.dbilldate.substring(0,10)"><view class="checkbox_collapse"><!--多选项目 checkbox 和 view同级--><!-- value绑定的值;checked当前是否选中,可用来设置默认选中 --><checkbox :value="item.checkboxValue" :checked="item.checked" color="#1d99ff" /><view style="margin-left: 10px;width: 100%;"><view v-for="(array,index3) in item.detail" :key="index3"><u-row><u-col span="1" v-if="item.detail.length > 1">{{index3+1}}</u-col><u-col span="11"><view class="uni-body order_detail_product_name">{{array.materialName}}{{array.castUnit}}</view><view class="uni-body order_detail_product_name"><text style="color: #5d5d5d;">订单:</text>{{array.saleCode}}</view><view class="uni-body order_detail_product_name bottom-border"><text style="color: #5d5d5d;">单项金额:</text>¥{{array.norigtaxmny}}</view></u-col></u-row></view><view class="order_detail"><view style="color: black;">¥{{item.totalPrice}}</view></view></view></view></uni-card></view></checkbox-group></scroll-view><view class="foot_view"><u-row><u-col><u-row><u-col span="5" class="foot_view_checkbox"><!--全选选择器--><checkbox-group placement="column" @change="groupChange"><checkbox :value="allRadio.name" :checked="allRadio.checked" color="#1d99ff"style="margin-left: 25px;">全选</checkbox></checkbox-group></u-col><u-col span="9" justify="end"><view class="foot_view_but_box"><button type="primary" class="foot_view_but" @click="submitTicket">提交申请</button></view></u-col></u-row></u-col></u-row></view>
</view>

JS 代码

export default {name: "pending",data() {return {pendingList: [],scrollTop: 0,allRadio: { name: '全选',checked: false},selectPending: [], //选中的经销商数据selectPendingCode: [],//选中的出库单编号和订单编号数据dealerRadio: false, //选择开票客户和发票类型对话框dealerRadioList: [], //开票客户selectDealerRadio: '', //对话框中选择的经销商totalAmount: 0,//总金额showDealerRadio: false, // 开票客户对话框}},methods: {checkboxChange(e) {this.totalAmount = 0 //总金额this.selectPending = [] //选中的经销商数据this.selectPendingCode = []//选中的出库单编号和订单编号数据let dealerList = new Set() //这步业务需要,过滤重复经销商//  e.detail.value是checkbox选中的值:"XC2022121000000002-SO302022121000000001"let selectData = e.detail.value//pendingList循环的数据for (var i = 0, lenI = this.pendingList.length; i < lenI; ++i) {const item = this.pendingList[i]//判断selectData和pendingList.checkboxValue是否相等,相等则把checked设为trueif (selectData.includes(item.checkboxValue)) {this.$set(this.pendingList[i], 'checked', true)} else {this.$set(this.pendingList[i], 'checked', false)}}//  商品是否全部勾选,判断全选与否状态var offCarArr = []//this.pendingList.whether 属性值是true,则把itempush到offCarArrthis.pendingList.forEach(item => item.whether == true ? offCarArr.push(item) : '')//offCarArr的checked都是true,则allChecks = true,否则反之//every 若有一个不满足条件,则返回false,后面的元素都不会再执行。不会对空数组进行检测,不会改变原始数组let allChecks = offCarArr.every(item => item.checked == true)//如果allChecks等于true就反allRadio改为选中状态allChecks ? this.$set(this.allRadio, 'checked', true) : this.$set(this.allRadio, 'checked', false)//往dealerList添加经销商数据for (let ii in selectData) {this.selectPendingCode.push(selectData[ii])const temp = selectData[ii].split('-')for (let i in this.pendingList) {if (temp[0] === this.pendingList[i].deliveryCode) {this.totalAmount += this.pendingList[i].totalPricefor (let j in this.pendingList[i].detail) {let item = this.pendingList[i].detail[j]const str = item.invoiceCustCode + '-' + item.invoiceCustNamedealerList.add(str)}}}}this.selectPending = [...dealerList]},groupChange(n) {//全选按钮是否选中if (n.detail.value.length == 0) { //未选中this.pendingList.map(item => this.$set(item, 'checked', false))this.$set(this.allRadio, 'checked', false)//清空业务数据this.totalAmount = 0this.selectPending = []this.selectPendingCode = []} else {// 选中for (var i in this.pendingList) {this.$set(this.pendingList[i], 'checked', true)}this.$set(this.allRadio, 'checked', true)//清空业务数据this.totalAmount = 0this.selectPending = []this.selectPendingCode = []let dealerList = new Set()//往dealerList添加经销商数据for (let i in this.pendingList) {if (this.pendingList[i].checked) {this.selectPendingCode.push(this.pendingList[i].checkboxValue)this.totalAmount += this.pendingList[i].totalPricefor (let j in this.pendingList[i].detail) {let item = this.pendingList[i].detail[j]const str = item.invoiceCustCode + '-' + item.invoiceCustNamedealerList.add(str)}}}this.selectPending = [...dealerList]}},}
}

相关文章:

uniapp heckbox-group实现多选

文章目录 html 代码JS 代码 混了业务逻辑&#xff0c;谨慎观看 html 代码 <view><!--可滚动视图区域。用于区域滚动 --><scroll-view :style"{ height: clientHeight px }" :scroll-top"scrollTop" scroll-y"true"scrolltouppe…...

读懂:“消费报销”模式新零售打法,适用连锁门店加盟的营销方案

读懂&#xff1a;“消费报销”模式新零售打法&#xff0c;适用连锁门店加盟的营销方案 引言&#xff1a;2023年的双十一已经落下帷幕&#xff0c;作为每年的经典电商促销节&#xff0c;今年已是第15个年头&#xff0c;但是今年各大电商平台却都是非常默契的&#xff0c;没有公布…...

一个基本的http客户端

高可用 客户端 1. httpClient.h #include <iostream> #include <string> #include <functional>class HttpClient { public:HttpClient(std::string url) : url_(url), port_(0) {}int write_http(const std::string &method, const std::string &…...

html-网站菜单-点击菜单展开相应的导航栏,加减号可切换

一、效果图 1.点击显示菜单栏&#xff0c;点击x号关闭&#xff1b; 2.点击一级菜单&#xff0c;展开显示二级&#xff0c;并且加号变为减号&#xff1b; 3.点击其他一级导航&#xff0c;自动收起展开的导航。 二、代码实现 <!DOCTYPE html> <html><head>&…...

2.FastRunner定时任务Celery+RabbitMQ

注意&#xff1a;celery版本和Python冲突问题 不能用高版本Python 用3.5以下&#xff0c;因为项目的celery用的django-celery 3.2.2 python3.7 async关键字 冲突版本 celery3.x方案一&#xff1a; celery3.xpython3.6方案二 &#xff1a; celery4.xpython3.7 解决celery执…...

vb.net 实时监控双门双向门禁控制板源代码

本示例使用设备介绍&#xff1a;实时网络双门双向门禁控制板可二次编程控制网络继电器远程开关-淘宝网 (taobao.com) Imports System.Net.Sockets Imports System.Net Imports System.Text Imports System.ThreadingImports System.Net.NetworkInformation Imports System.Man…...

文具办公产品展示预约小程序的作用如何

从整体来看&#xff0c;文具办公品牌/门店的生意来源于线下自然流量或线上自营商城/入驻第三方商城的的流量&#xff0c;线上多数情况都是以直接销售配送为主&#xff0c;但其实对文具品牌/门店而言还有信息展示、服务预约、在线咨询、产品介绍等需求。 虽然小区周边的消费者需…...

渗透测试流程是什么?7个步骤给你讲清楚!

在学习渗透测试之初&#xff0c;有必要先系统了解一下它的流程&#xff0c;静下心来阅读一下&#xff0c;树立一个全局观&#xff0c;一步一步去建设并完善自己的专业领域&#xff0c;最终实现从懵逼到牛逼的华丽转变。渗透测试是通过模拟恶意黑客的攻击方法&#xff0c;同时也…...

如何解决网站被攻击的问题:企业网络攻防的关键路径

在当今数字化时代&#xff0c;企业面临着不断升级的网络威胁&#xff0c;网站遭受攻击的风险也与日俱增。解决网站被攻击的问题对企业发展至关重要&#xff0c;不仅关系到企业的信息安全&#xff0c;也直接影响到企业的声誉和利益。从企业发展的角度出发&#xff0c;我们将探讨…...

大健康产业的先行者「完美公司」携手企企通,推进企业采购供应链数字化进程

随着中国经济持续向好&#xff0c;消费升级和美妆步骤增加&#xff0c;美妆和个人护理产品已逐渐成为中国消费者的日用消费品&#xff0c;推动了护肤品和化妆品的销售额增速均超过10%&#xff0c;成为中国整个快速消费品市场中的一颗亮眼明珠。 据国家统计局数据显示&#xff0…...

在windows Server安装Let‘s Encrypt的SSL证书

1、到官网&#xff08;https://certbot.eff.org/instructions?wswebproduct&oswindows&#xff09;下载 certbot客户端。 2、安装客户端&#xff08;全部默认安装即可&#xff09; 3、暂停IIS中的网站 开始菜单中找到并运行“Certbot”&#xff0c;输入指令&#xff1a; …...

GPT实战系列-P-Tuning本地化训练ChatGLM2等LLM模型,到底做了什么?(二)

GPT实战系列-如何使用P-Tuning本地化训练ChatGLM2等LLM模型&#xff1f;(二) 文章目录 GPT实战系列-1.训练参数配置传递2.训练前准备3.训练参数配置4.训练对象&#xff0c;seq2seq训练5.执行训练6.训练模型评估依赖数据集的预处理 P-Tuning v2 将 ChatGLM2-6B 模型需要微调的参…...

Python3.7+PyQt5 pyuic5将.ui文件转换为.py文件、Python读取配置文件、生成日志

1.实际开发项目时&#xff0c;是使用Qt Designer来设计UI界面&#xff0c;得到一个.ui的文件&#xff0c;然后利用PyQt5安装时自带的工具pyuic5将.ui文件转换为.py文件&#xff1a; pyuic5 -o mywindow.py mywindow.ui #先是py文件名&#xff0c;再是ui文件名样式图 QT5 UI&am…...

使用 VPN ,一定要知道的几个真相!

你们好&#xff0c;我的网工朋友。 今天想和你聊聊VPN。在VPN出现之前&#xff0c;企业分支之间的数据传输只能依靠现有物理网络&#xff08;例如Internet&#xff09;。 但由于Internet中存在多种不安全因素&#xff0c;报文容易被网络中的黑客窃取或篡改&#xff0c;最终造…...

数电实验-----实现74LS153芯片扩展为8选1时间选择器以及应用(Quartus II )

目录 一、74LS153芯片介绍 管脚图 功能表 二、4选1选择器扩展为8选1选择器 1.扩展原理 2.电路图连接&#xff08;Quartus II &#xff09; 3.仿真结果 三、8选1选择器的应用 1.三变量表决器 2.奇偶校验电路 一、74LS153芯片介绍 74ls153芯片是属于四选一选择器的芯片。…...

如何实现MATLAB与Simulink的数据交互

参考链接&#xff1a;如何实现MATLAB与Simulink的数据交互 MATLAB是一款强大的数学计算软件&#xff0c;Simulink则是一种基于模型的多域仿真平台&#xff0c;常用于工程和科学领域中的系统设计、控制设计和信号处理等方面。MATLAB和Simulink都是MathWorks公司的产品&#xff0…...

【数据结构】归并排序

​​ &#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵 希望大佬指点一二 如果文章对你…...

数字引领,智慧赋能|袋鼠云与易知微共同亮相2023智慧港口大会

2023年10月19日&#xff0c;由中国港口协会、中国交通通信信息中心、天津港&#xff08;集团&#xff09;有限公司主办&#xff0c;中国港口协会智慧港口专业委员会、《港口科技》杂志社等单位承办的以“数字引领 智慧赋能”为主题的“2023智慧港口大会”在天津顺利召开。 袋鼠…...

星火模型(Spark)的langchain 实现

星火模型的langchain实现 测试已通过&#xff0c;希望有所帮助。 使用前请先安装环境&#xff1a; pip install githttps://github.com/shell-nlp/spark-ai-python.git注意&#xff1a; 一定要使用上面方式安装spark库&#xff0c;因对官方的库做了改动。官方的库已经长时间不…...

python运算符重载之构造函数和迭代器

1 python运算符重载之构造函数和迭代器 python运算符重载是在类方法中拦截内置操作-当类的实例使用内置操作时&#xff0c;pytho自动调用对应方法&#xff0c;并且返回操作结果。 NO#描述1拦截运算运算符重载拦截内置操作&#xff0c;比如打印、函数调用、点号运算、表达式运…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...