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

单选全选功能实现

单选框:

// v-for="i in carStore.cartList" i 是购物车里的单类商品
<el-checkbox :model-value="i.selected" @change="(selected)=>singeCheck(i,selected)"/>

全选框:

<el-checkbox :model-value="carStore.isAll" @change="allCheck"/>

触发事件:

const singeCheck = (i, selected) => {carStore.singCheck(i.skuId, selected)
}
const allCheck = (selected) => {carStore.allCheck(selected)
}
const singCheck = (skuId, selected) => {const item = cartList.value.find((item) => item.skuId === skuId)item.selected = selected
}
const isAll = computed(() => cartList.value.every((item) => item.selected))
const allCheck = (selected) => {cartList.value.forEach(item => item.selected = selected)
}

在这里插入图片描述
在这里插入图片描述

相关文章:

  • k8s弃用docker后使用ctr导入镜像
  • 代码随想录算法训练营29期|day43 任务以及具体任务
  • leetcode-hot100树的专题
  • 验证码倒计时:用户界面的小细节,大智慧
  • 多维时序 | Matlab实现RF-Adaboost随机森林结合Adaboost多变量时间序列预测
  • SSL协议是什么?关于SSL和TLS的常见问题解答
  • Map 集合
  • 编译原理实验1——词法分析(python实现)
  • @ResponseBody
  • 创建TextMeshPro字体文件
  • jvm几个常见面试题整理
  • 三网码支付系统源码,三网免挂有PC软件,有云端源码,附带系统搭建教程
  • SpringBoot 过滤器Filter 拦截请求 生命周期
  • Scala 和 Java在继承机制方面的区别
  • 【Java万花筒】数据的安全钥匙:Java的加密与保护方法
  • hexo+github搭建个人博客
  • 「前端」从UglifyJSPlugin强制开启css压缩探究webpack插件运行机制
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • Angular 响应式表单 基础例子
  • Invalidate和postInvalidate的区别
  • Python_网络编程
  • QQ浏览器x5内核的兼容性问题
  • 服务器从安装到部署全过程(二)
  • 简单数学运算程序(不定期更新)
  • 删除表内多余的重复数据
  • 原生Ajax
  • 追踪解析 FutureTask 源码
  • #图像处理
  • (27)4.8 习题课
  • (Note)C++中的继承方式
  • (pytorch进阶之路)扩散概率模型
  • (二)PySpark3:SparkSQL编程
  • (利用IDEA+Maven)定制属于自己的jar包
  • (数据结构)顺序表的定义
  • (原创)boost.property_tree解析xml的帮助类以及中文解析问题的解决
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • .NET 8 中引入新的 IHostedLifecycleService 接口 实现定时任务
  • .Net 中Partitioner static与dynamic的性能对比
  • .net 逐行读取大文本文件_如何使用 Java 灵活读取 Excel 内容 ?
  • .Net转Java自学之路—基础巩固篇十三(集合)
  • @kafkalistener消费不到消息_消息队列对战之RabbitMq 大战 kafka
  • [ Algorithm ] N次方算法 N Square 动态规划解决
  • [ASP.NET 控件实作 Day7] 设定工具箱的控件图标
  • [C#]手把手教你打造Socket的TCP通讯连接(一)
  • [C++] 如何使用Visual Studio 2022 + QT6创建桌面应用
  • [CTO札记]如何测试用户接受度?
  • [i.MX]飞思卡尔IMX6处理器的GPIO-IOMUX_PAD说明
  • [IE编程] 打开/关闭IE8的光标浏览模式(Caret Browsing)
  • [iOS]Win8下iTunes无法连接iPhone版本的解决方法
  • [java/jdbc]插入数据时获取自增长主键的值
  • [java] 23种设计模式之责任链模式
  • [LeetCode]—Add Binary 两个字符串二进制相加
  • [one_demo_18]js定时器的示例
  • [p4] Uncheckout other user‘s file?
  • [poj] 3974 Palindrome