智慧商城:封装getters实现动态统计 + 全选反选功能

封装getters实现动态统计

在store文件夹下的modules文件夹下的 cart.js模块中,在getters中,计算所有购物车列表中商品总数,选中的商品数,选中的总数,选中的总价

总价优化:保留两位小数

没有选中任何商品时,"结算"按钮应不高亮才是

在结算和删除中,如果选中的商品数为0,应该加上disabled类,

全选反选功能

为复选框添加点击事件 ,小选控制大选(小的全选中了,大的才会选中)

如果发现state中cartList中的项跟点击传递过来的goodsId一样,则将state中的isChecked信息取反

如果每个商品都选选中了,那么才会需要全选,否则不需要

页面中映射渲染

大选控制小选 (点击全选然后每项都选中)
为全选框注册点击事件,将每个子选框状态取反

每个子选框是否全选中映射为 isAllChecked,现在为全选中框架注册点击事件toggleAllCheck,将是否全选中isAllChecked状态取反传递到vuex中,将每一项子选框状态改为isAllChecked的取反状态

相关推荐
米码收割机10 分钟前
【Python】Python Django+Vue3校园自习室预约管理系统(源码+文档+PPT)【独一无二】
开发语言·python·django
AstartesEternal18 分钟前
python第二次作业(列表,字典)
开发语言·python
星恒随风26 分钟前
C++ STL 详解:set 与 multiset 的使用、区间查询和算法应用
开发语言·c++·笔记·学习·算法
数聚天成DeepSData34 分钟前
外贸海关进出口数据去哪免费下载?从统计到明细的查找指南
linux·服务器·开发语言·前端·网络·人工智能·自然语言处理
再卷也是菜36 分钟前
C++11支持并发库
开发语言·c++
Lhan.zzZ39 分钟前
QML 开发中的“陷阱”:动态模型更新时,ComboBox 索引为何总是失效?
开发语言·qt
小园子的小菜1 小时前
Java 并发四大工具类深度解析:CountDownLatch、CyclicBarrier、Semaphore、Exchanger 原理、源码与面试考点
java·开发语言·面试
名字还没想好☜1 小时前
React createPortal 实战:模态框逃出 overflow:hidden、事件冒泡与焦点管理
前端·javascript·react.js·ecmascript·react·createportal
河西石头1 小时前
再谈C#的抽象类和接口:从“适配器”到“毛坯房”的设计哲学
开发语言·c#·接口·依赖注入·抽象类·依赖倒挂
颜x小1 小时前
[C#]——接口与继承
开发语言·c++·c#