uniapp实现---类似购物车全选
目录
一、实现思路
二、实现步骤
①view部分展示
②JavaScript 内容
③css中样式展示
三、效果展示
四、小结 + 注意事项
一、实现思路
点击商家复选框,可选中当前商家下的所有商品。点击全选,选中全部商家的商品
添加单个多选框,在将多选框绑定到全选按钮上。
uniapp内置的checkbox以及checkbox-group:
无法依赖其事件实现全选,样式固定,难以修改。
二、实现步骤
①view部分展示
<view><view class="checkboxAll"><u-checkbox-group @change="selectAll"><u-checkbox :checked="allChecked" shape="circle" activeColor="#FF6C47"></u-checkbox><text style="color: #FF6C47;">全选</text></u-checkbox-group></view><template v-for="(item,index) in itemsList"><view class="uni-list" style="padding: 32rpx" :key="index"><view class="flex-between"><view class="flex"><checkbox-group @change="changeitem(item)" checked class="checkbox" ><u-checkbox :value="item.name" :checked="item.checked" shape="circle" activeColor="#FF6C47"/></checkbox-group><view class="flex-colomn" style="margin-left: 16rpx;"><view style="font-size: 32rpx;color: #1A1A1A;">{{item.name}}</view><view style="ont-size: 24rpx;color: #666666;margin-top: 8rpx;"><textstyle="ont-size: 24rpx;color: #666666;">学号:</text>{{item.number}}</view></view></view><view class="flex"><view style="font-size: 36rpx;color: #1A1A1A;">{{item.num}}</view><view style="margin-left: 16rpx;"><u-icon name="arrow-right" size="15" color="#999999"></u-icon></view></view></view></view></template></view>
②JavaScript 内容
<script>export default {data() {return {checkList: [], //选中值allChecked: false, //是否全选title: 'checkbox 复选框',itemsList: [{name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, ]}},methods: {//单选changeitem(item) {item.checked = !item.checkedif (!item.checked) {this.allChecked = false} else {// 判断每一个列表是否是被选择的状态const cartList = this.itemsList.every(item => {return item.checked === true})if (cartList) {this.allChecked = true} else {this.allChecked = false}}},//全选,全不选selectAll() {this.allChecked = !this.allCheckedif (this.allChecked) {this.itemsList.map(item => {item.checked = true})} else {this.itemsList.map(item => {item.checked = false})}},},}
</script>
③css中样式展示
<style lang="scss" scoped>.checkboxAll {margin-left: 80%;margin-top: 24rpx;}.uni-list-cell {justify-content: flex-start;}</style>
三、效果展示
可以全部选择的状态,也可以是单选状态。


四、小结 + 注意事项
u-checkbox-group标签中u-checkbox没有插槽,不支持在里面写内容,必须在u-checkbox-group外面写内容布局。u-checkbox-group--->u-checkbox是可以实现的。

相关文章:
uniapp实现---类似购物车全选
目录 一、实现思路 二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示 三、效果展示 四、小结 注意事项 一、实现思路 点击商家复选框,可选中当前商家下的所有商品。点击全选,选中全部商家的商品 添加单个多选框,在将多选…...
Java:List列表去重有序和无序
目录 待去重列表HashSet去重(不保证顺序)TreeSet去重(不保证顺序)LinkedHashSet去重(保证顺序)遍历List去重(保证顺序)Java8中Stream流处理(保证顺序)参考文章 待去重列表 // 列表 …...
Python绘图-12地理数据可视化
Matplotlib 自 带 4 类别 地理投影: Aitoff, Hammer, Mollweide 及 Lambert 投影,可以 结 合以下四 张 不同 的 图 了解四 种 不同投影 区别 。 12.1Aitoff投影 12.1.1图像呈现 12.1.2绘图代码 import numpy as np # 导入numpy库,用于…...
NineData与OceanBase完成产品兼容认证,共筑企业级数据库新生态
近日,云原生智能数据管理平台 NineData 和北京奥星贝斯科技有限公司的 OceanBase 数据库完成产品兼容互认证。经过严格的联合测试,双方软件完全相互兼容、功能完善、整体运行稳定且性能表现优异。 此次 NineData 与 OceanBase 完成产品兼容认证…...
旅游专业VR虚拟仿真情景教学实训
一、生动的情景模拟 VR技术能够创建出高度逼真的虚拟环境,使学生能够身临其境地体验旅游场景。无论是古色古香的古代建筑,还是充满异国情调的热带雨林,亦或是繁华的都市风光,VR都能一一呈现。这种沉浸式的体验,使得学…...
解决方案TypeError: string indices must be integers
文章目录 一、现象:二、解决方案 一、现象: PyTorch深度学习框架,运行bert-mini,本地环境是torch1.4-gpu,发现报错显示:TypeError: string indices must be integers 后面报字符问题,百度过找…...
【论文阅读】Segment Anything论文梳理
Abstract 我们介绍了Segment Anything(SA)项目:新的图像分割任务、模型和数据集。高效的数据循环采集,使我们建立了迄今为止最大的分割数据集,在1100万张图像中,共超过10亿个掩码。 该模型被设计和训练为可…...
接口自动化测试框架搭建:基于python+requests+pytest+allure实现
众所周知,目前市面上大部分的企业实施接口自动化最常用的有两种方式: 1、基于代码类的接口自动化,如: PythonRequestsPytestAllure报告定制 2、基于工具类的接口自动化,如: PostmanNewmanJenkinsGit/svnJme…...
蓝桥杯(3.9)
1210. 连号区间数 蓝桥杯暴力过80% import java.util.Arrays; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int[] res new int[n];int[] copy new int[n];for(int i0;i&…...
万物皆可Find My,伦茨科技ST17H6x芯片赋能产品苹果Find My功能
苹果的Find My功能使得用户可以轻松查找iPhone、Mac、AirPods以及Apple Watch等设备。如今Find My还进入了耳机、充电宝、箱包、电动车、保温杯等多个行业。苹果发布AirTag发布以来,大家都更加注重物品的防丢,苹果的 Find My 就可以查找 iPhone、Mac、Ai…...
UHF无线麦克风方案的特点
U段无线麦克风方案是一种基于UHF频段的无线音频传输技术。相比于传统的VHF频段和2.4GHZ频段,U段频谱资源更为宽阔,信号传输更加稳定可靠。 1.广阔的频谱资源:U段频段通常指450MHZ至900MH之间的频谱范围,相比于VHF频段的100MH至30…...
STM32 学习10 PWM输出
STM32 学习10 PWM输出 一、PWM简介1. PWM的概念2. PWM的工作原理3. PWM 常用的应用场景 二、一些概念1. 频率2. 占空比 三、STM32F1 PWM介绍1. 定时器与寄存器(1)**自动重装载寄存器(ARR)**:(2)…...
SQL语言(数据库编程)
一.select查询 在数据库编程中,SQL(Structured Query Language,结构化查询语言)是一种用于管理关系数据库管理系统(RDBMS)的标准编程语言。其中,SELECT 是 SQL 中最常用的查询语句,用于从数据库表中检索数据。 下面是一个基本的 SELECT 查询的示例: SELECT column1…...
C#面向对象(OOPs)中的多态性
本文由 简悦 SimpRead 转码, 原文地址 mp.weixin.qq.com C#面向对象(OOPs)中的多态性 概述:在编程语言和类型理论中,多态性是为不同类型的实体提供单个接口,或者使用单个符号来表示多个不同的类型。多态对象是能够呈现多种形式的…...
(二十一)从零开始搭建k8s集群——kubernates核心组件及功能介绍
前言 Kubernetes是一个可移植、可扩展、开源的平台,用于管理容器化的工作负载和服务,它促进了声明性配置和自动化。Kubernetes容器可以持续开发、集成和部署:可靠且频繁地构建和部署容器镜像,快速有效地回滚;开发与运…...
[云原生] k8s之存储卷
一、emptyDir存储卷 当Pod被分配给节点时,首先创建emptyDir卷,并且只要该Pod在该节点上运行,该卷就会存在。正如卷的名字所述,它最初是空的。Pod 中的容器可以读取和写入emptyDir卷中的相同文件,尽管该卷可以挂载到每…...
【PCL】(二十七)基于法线差的点云分割
(二十七)基于法线差的点云分割 图片来源 提出这个方法的论文:Difference of Normals as a Multi-Scale Operator in Unorganized Point Clouds 算法流程: 在大尺度的范围内(半径 r 1 r_1 r1)估计每个点…...
智慧公厕系统的组成部分有什么?
智慧公厕系统是现代城市管理中一项重要的创新,利用物联网、互联网、大数据、云计算、自动化控制等先进的技术手段,提供高效便捷的公厕服务。从信息系统的角度来看,智慧公厕系统主要由硬件、软件和网络组成,硬件、软件和网络三大部…...
[数据集][目标检测]芒果叶病害数据集VOC+YOLO格式4000张5类别
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):4000 标注数量(xml文件个数):4000 标注数量(txt文件个数):4000 标注…...
Linux: 预备
计算机结构基础 操作系统: 内核 (管理软硬件) shell(给用户使用操作系统的方式) 操作系统的目标 对硬件抽象 原因:操作系统是对软硬件资源管理的应用软件抽象:内存管理, 进程管理, 文件管理, 驱动管理软件:驱动程序(给软件提供访问硬件的软件)硬件:磁盘(对应文件), 网卡等隔离…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展,AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术,在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
Linux 下 DMA 内存映射浅析
序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存,但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程,可以参考这篇文章,我觉得写的非常…...
