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

Vue原生写全选反选框

效果

场景:Vue全选框在头部,子框在v-for循环内部。
实现:点击全选框,所有子项选中,再次点击取消;子项全选中,全选框自动勾选,子项并未全选,全选框不勾选;已选和全选数量统计;
在这里插入图片描述

实现

#1. html

<div class="checkall" :class="isCheck?'active':''" @click="clickAll"></div><span>全选</span><div class="card" v-for="(item, index) in tableData" :key="index"><div class="checkitem" :class="item.isCheck?'active':''" @click="clickItem(item.id)"></div>
</div>

#2. js

data() {return {tableData: [],isCheck:false,Selected: 0,SelectAll: 0,}},
mounted:{this.init();
}
methods:{async init(){let res = await ...; //请求this.tableData = res.datathis.SelectAll = res.data.length;this.tableData = this.tableData.map(item => {item.isCheck = falsereturn item})},clickItem(id){this.tableData.forEach(v=>{v.id == id ? v.isCheck = !v.isCheck : ''})this.Selected = this.tableData.filter(i=>i.isCheck).length; if(this.Selected == this.SelectAll){this.isCheck = true;}else{this.isCheck?this.isCheck=false:'';}},clickAll(){this.isCheck = !this.isCheck;if(this.isCheck){this.tableData.forEach(v=>{v.isCheck = true;})}else{this.tableData.forEach(v=>{v.isCheck = false;})}this.Selected = this.tableData.filter(i=>i.isCheck).length;}
}

#3. css

.checkall{height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;
}
.checkall.active{background-color: #1E77F5;}.checkitem{position: absolute;top: .16rem;right: .16rem;height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;z-index: 1;
}
.checkitem.active{background-color: #1E77F5;
}

#完整代码:

<div class="checkall" :class="isCheck?'active':''" @click="clickAll"><span class="icon iconfont" style="color:#fff;" v-show="isCheck">&#xe715;</span>
</div><span>全选</span><div class="card" v-for="(item, index) in tableData" :key="index"><div class="checkitem" :class="item.isCheck?'active':''" @click="clickItem(item.id)"><span class="icon iconfont" style="color:#fff;" v-show="item.isCheck">&#xe715;</span></div>
</div>
...
data() {return {tableData: [],isCheck:false,Selected: 0,SelectAll: 0,}},
mounted:{let res = await ...; //请求后端接口this.tableData = res.datathis.SelectAll = res.data.length;this.tableData = this.tableData.map(item => {item.isCheck = falsereturn item})
}
methods:{clickItem(id){this.tableData.forEach(v=>{v.id == id ? v.isCheck = !v.isCheck : ''})this.Selected = this.tableData.filter(i=>i.isCheck).length; //选完统计一下选中个数,同时调用this.tableData本身可以让视图及时更新,不再调用会出现选中没效果if(this.Selected == this.SelectAll){this.isCheck = true;}else{this.isCheck?this.isCheck=false:'';}},clickAll(){this.isCheck = !this.isCheck;if(this.isCheck){this.tableData.forEach(v=>{v.isCheck = true;})}else{this.tableData.forEach(v=>{v.isCheck = false;})}this.Selected = this.tableData.filter(i=>i.isCheck).length;}
}
...
.checkall{height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;
}
.checkall.active{background-color: #1E77F5;}.checkitem{position: absolute;top: .16rem;right: .16rem;height: .16rem;width: .16rem;border-radius: 0.02rem;border: 1px solid #1E77F5;margin-right: .06rem;z-index: 1;
}
.checkitem.active{background-color: #1E77F5;
}

相关文章:

Vue原生写全选反选框

效果 场景&#xff1a;Vue全选框在头部&#xff0c;子框在v-for循环内部。 实现&#xff1a;点击全选框&#xff0c;所有子项选中&#xff0c;再次点击取消&#xff1b;子项全选中&#xff0c;全选框自动勾选&#xff0c;子项并未全选&#xff0c;全选框不勾选&#xff1b;已选…...

typescript学习回顾(三)

今天继续来分享ts的相关概念&#xff0c;枚举&#xff0c;ts模块化&#xff0c;接口和类型兼容性 ts的扩展类型&#xff1a;类型别名&#xff0c;枚举&#xff0c;接口和类 枚举 基础概念 枚举通常用于约束某个变量的取值范围。当然字面量和联合类型配合使用&#xff0c;也可…...

算尽天下财,铸就大明梦 —— 大明钱算子夏元吉的传奇一生

仕途生涯开始&#xff1a;洪武二十三年&#xff08;1390年&#xff09;&#xff0c;夏元吉因精通《诗经》&#xff0c;由湖广乡荐参加礼部组织的会试&#xff0c;虽未中举&#xff0c;但他并未气馁&#xff0c;反而更加努力地学习。洪武二十四年&#xff08;1391年&#xff09;…...

openCV3.0 C++ 学习笔记补充(自用 代码+注释)---持续更新 二(51-)

环境&#xff1a;OpenCV3.2.0 VS2015 51、Mean-Shift算法分割图像 cv::pyrMeanShiftFiltering() 参考链接&#xff1a;【从零学习OpenCV 4】分割图像——Mean-Shift分割算法 Mean-Shift算法又被称为均值漂移法&#xff0c;是一种基于颜色空间分布(彩色图像的像素值)的图像分割…...

读AI新生:破解人机共存密码笔记13有益机器

1. 标准模型 1.1. 我们能控制一个从外太空来的超级智能实体的概率几乎为零 1.2. 随着根据标准模型设计的机器变得更加智能&#xff0c;以及它们的行动范围遍及全球&#xff0c;关闭机器这种方法越来越不可行 1.2.1. 机器将会追求它们自己的目标&#xff0c;无论目标错得多么…...

Spring Boot中使用Swagger生成API文档

Spring Boot中使用Swagger生成API文档 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在现代的软件开发中&#xff0c;良好的API文档是团队协作和开发效率不可或…...

解决 macOS 中“无法验证开发者”的问题

解决 macOS 中“无法验证开发者”的问题 在使用 macOS 系统时&#xff0c;你可能会遇到一个常见的问题&#xff1a;当你尝试安装或打开某些应用程序时&#xff0c;系统会弹出一个警告&#xff0c;提示“无法验证开发者”。这通常发生在从非官方 App Store 下载的应用程序上。本…...

Emp.dll文件丢失?理解Emp.dll重要性与处理常见问题

在繁多的动态链接库&#xff08;DLL&#xff09;文件中&#xff0c;emp.dll 可能不是最广为人知的&#xff0c;但在特定软件或环境中&#xff0c;它扮演着关键角色。本文旨在深入探讨 emp.dll 的功能、重要性以及面对常见问题时的解决策略。 什么是 emp.dll&#xff1f; Emp.d…...

知识平台管理系统设计

知识平台管理系统设计是一个综合性的过程&#xff0c;旨在为企业或组织提供一个高效、便捷的知识管理解决方案。以下是知识平台管理系统设计的详细阐述&#xff1a; 一、设计目标和原则 1、设计目标&#xff1a;设计一款功能强大、易于使用、支持多种知识形式分类和搜索的知识管…...

Python 中字符串修饰符

1. 原始字符串 (Raw String) - r 或 R 使用 r 或 R 前缀&#xff0c;可以告诉 Python 字符串中的所有反斜杠都是普通字符&#xff0c;而不是转义字符。这在处理文件路径、正则表达式等情况下非常有用。 path rC:\new_folder\test.txt # 原始字符串2. 格式化字符串 (Formatt…...

红队内网攻防渗透:内网渗透之内网对抗:横向移动篇Kerberos委派安全RBCD资源Operators组成员HTLMRelay结合

红队内网攻防渗透 1. 内网横向移动1.1 横向移动-资源约束委派-利用域用户主机加入1.1.1 利用思路1.1.2 利用条件1.1.3 利用过程1.2 横向移动-资源约束委派-Acount Operators组1.2.1 利用思路:1.2.2 利用条件:1.2.3 利用过程:1.3 横向移动-资源约束委派-CVE结合HTLMRelay1.3.…...

Manjaro Linux系统简介和archlinux哲学

## Manjaro Linux系统简介 Manjaro Linux是一个基于Arch Linux的操作系统&#xff0c;以其用户友好性和滚动更新机制而受到广泛欢迎。它为用户提供了一个易于安装和使用的平台&#xff0c;同时保持了Linux系统的高度定制性和最新的软件特性。 ### Manjaro Linux与Arch Linux的…...

【Windows 常用工具系列 17 -- windows bat 脚本多参数处理】

请阅读【嵌入式开发学习必备专栏】 文章目录 bat 脚本命令行参数使用示例多参数处理使用示例遍历所有参数 bat 脚本命令行参数 在Windows批处理&#xff08;.bat&#xff09;脚本中接收命令行参数是一个常见的需求&#xff0c;这样的脚本能够根据提供的参数执行不同的操作。命…...

《Windows API每日一练》6.3 非客户区鼠标消息

上一节我们讨论客户区的鼠标消息&#xff0c;本节我们讨论非客户区鼠标消息。如果鼠标位于窗口内部除客户区外的其他区域&#xff0c;Windows就会向窗口过程发送一个“非客户区”鼠标消息。窗口的非客户区包括标题栏、菜单和窗口滚动条。 本节必须掌握的知识点&#xff1a; 非…...

Http客户端-Feign 学习笔记

作者介绍&#xff1a;计算机专业研究生&#xff0c;现企业打工人&#xff0c;从事Java全栈开发 主要内容&#xff1a;技术学习笔记、Java实战项目、项目问题解决记录、AI、简历模板、简历指导、技术交流、论文交流&#xff08;SCI论文两篇&#xff09; 上点关注下点赞 生活越过…...

【Linux】进程信号_2

文章目录 八、进程信号1. 信号 未完待续 八、进程信号 1. 信号 除了可以使用 kill 命令和键盘来生成信号&#xff0c;我们也可以使用系统调用来生成信号。 kill函数可以对指定进程发送指定信号。 使用方法&#xff1a; int main(int argc, char *argv[]) {if (argc ! 3) {c…...

关于五度圈

五度圈简介 五度圈&#xff08;Circle of Fifths&#xff09;是一个展示各个调之间关系的图表。顺时针方向&#xff0c;每个调比前一个调高五度。逆时针方向&#xff0c;每个调比前一个调低五度。五度圈不仅展示了调性之间的关系&#xff0c;还能帮助你理解和记忆音符之间的关…...

电脑突然提示dll文件丢失,怎么选择正确的恢复方法?

电脑突然提示dll文件丢失&#xff1f;其实当你的电脑使用久了&#xff0c;出现这种dll文件丢失是非常的正常的&#xff0c;毕竟你总会有不恰当的操作吧&#xff1f;这些操作都是会导致dll文件丢失的。丢失了&#xff0c;我们直接进行相关的修复就好了&#xff0c;还是比较简单的…...

HTML(12)——背景属性

目录 背景属性 背景图 背景图平铺方式 背景图位置 背景图缩放 背景图固定 背景属性 属性描述background-color背景色background-image (bgi)背景图background-repeat (bgr)背景图平铺方式background-position (bgp)背景图位置background-size (bgz)背景图缩放backgro…...

C语言 指针——从函数返回字符串

目录 从函数返回字符指针 编程实现strcat()的功能 小结 从函数返回字符指针 编程实现strcat()的功能 小结 明确字符串被保存到了哪里&#xff0c;明确字符指针指向了哪里  指向字符串常量的字符指针  指向字符数组的字符指针 向函数传递字符串的方法  向函数传…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...