单选全选功能实现

单选框:

// 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)
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/459399.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Skywalking开发分布式监控(二)

续上篇&#xff0c;上一篇主要是讲了为啥选skywalking&#xff0c;以及怎么有针对性改造SW Agent&#xff0c;现在我们继续看看如何构建自定义Trace跟踪链 要对SW Agent插件做适当剪裁&#xff0c;原来包括customize插件在内SW 8.9有100多个插件&#xff0c;如果没有作用也就罢…

Android:国际化弹出框

3.13 风格与主题、国际化 1、应用国际化 应用国际化&#xff0c;通过修改系统语言&#xff0c;应用显示语言跟着改变。 选择Locale,点击>>符号。 创建多个国家&#xff0c;地区strings.xml文件&#xff0c;有一个默认strings.xml文件&#xff0c;各个stirngs.xml中<…

本地安全策略 | 服务器管理 | 配置项

本地安全策略 Windows 本地安全策略是一组在本地计算机上配置的安全设置&#xff0c;用于管理计算机的安全性和访问控制。这些策略是针对单个计算机的&#xff0c;与域策略不同&#xff0c;本地安全策略不通过域控制器进行集中管理。本地安全策略通过本地组策略编辑器进行配置…

mac电脑flutter环境配置,解决疑难问题

准备工作 首先搭建flutter的环境需要使用到flutter的sdk&#xff0c;可以直接跳去官网下载&#xff1a;Choose your first type of app - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter&#xff0c;下载时要注意你电脑所使用的芯片是Intel的还是苹果的芯片。 下载好的…

C#调用WechatOCR.exe实现本地OCR文字识别

最近遇到一个需求&#xff1a;有大量的扫描件需要还原为可编辑的文本&#xff0c;很显然需要用到图片OCR识别为文字技术。本来以为这个技术很普遍的&#xff0c;结果用了几个开源库&#xff0c;效果不理想。后来&#xff0c;用了取巧的方法&#xff0c;直接使用了WX的OCR识别模…

Elasticsearch:使用 LangChain 文档拆分器进行文档分块

使用 Elasticsearch 嵌套密集向量支持 这个交互式笔记本将&#xff1a; 将模型 “sentence-transformers__all-minilm-l6-v2” 从 Hugging Face 加载到 Elasticsearch ML Node 中使用 LangChain 分割器将段落分块成句子&#xff0c;并使用嵌套密集向量将它们索引到 Elasticse…

07:Kubectl 命令详解|K8S资源对象管理|K8S集群管理(重难点)

Kubectl 命令详解&#xff5c;K8S资源对象管理&#xff5c;K8S集群管理 kubectl管理命令kubectl get 查询资源常用的排错命令kubectl run 创建容器 POD原理pod的生命周期 k8s资源对象管理资源文件使用资源文件管理对象Pod资源文件deploy资源文件 集群调度的规则扩容与缩减集群更…

Python tkinter树状目录窗口实现

通过tkinter GUI实现读取特定目录下所有目录及文件并在窗口中可选择显示。 通过左右布局实现&#xff0c;左侧为树状目录&#xff0c;右侧为输入框和显示文本框。 目录 tkinter树状目录 左侧树状目录 右侧显示 调用实现窗口 打开目录 打开py文件 总结 tkinter树状目录 …

使用influxdb+Grafana+nmon2influxdb+nmon实时监控vps性能

Grafana可以用来实时查看linux系统的各种性能数据。 1、安装环境&#xff1a; centos 7influxdb1.7.6grafana-4.6.3-1nmon2influxdb-2.1.7nmon-16m 2、安装influxdb&#xff1a; 下载rpm包&#xff1a; influxdb官网&#xff1a;https://docs.influxdata.com/influxdb/v2.0…

Win10系统启动盘制作

前面简单介绍了操作系统&#xff0c;但是怎样将操作系统安装到磁盘上呢。 一、操作系统引导 电脑启动大致流程&#xff1a; 预引导阶段&#xff1a;计算机通电后&#xff0c;系统自检&#xff0c;检查硬件是否正常。 引导阶段&#xff1a;BIOS或EFI在完成基本的硬件检测和平台初…

Visual Studio 2022中创建的C++项目无法使用万能头<bits/stdc++.h>解决方案

目录 发现问题 解决办法 第一步 第二步 第三步 第四步 最后一步 问题解决 发现问题 如果大家也遇到下面这种问题&#xff0c;可能是没有include文件夹中没有bits/stdc.h 解决办法 第一步 打开一个C项目&#xff0c;鼠标移动至头文件上右击&#xff0c;选择转到文档或…

基于SpringBoot3的快速迭代平台

SpringBoot3的快速开发平台 前言一、技术栈二、项目结构三、总结 前言 MateBoot是一个基于SpringBoot3的快速开发平台&#xff0c;采用前后端分离的模式&#xff0c;前端采用Element Plus组件&#xff0c;后端采用SpringBoot3、Sa-token、Mybatis-Plus、Redis、RabbitMQ、Fast…