066:vue中实现二维数组的全选、全不选、反选、部分全选功能(图文示例)

在这里插入图片描述

第061个

查看专栏目录: VUE ------ element UI


专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

(1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

(2)提供element UI的经典操作:安装,引用,国际化,el-row,el-col,el-button,el-link,el-radio,el-checkbox ,el-input,el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop,v-infinite-scroll, el-drawer等

本文章目录

    • 专栏目标
    • 示例背景
    • 示例效果图
    • 示例源代码

示例背景

根据vue项目的需求,需要做二维数组的全选、全不选、反选、部分全选功能。 怎么制作呢? 全选、全不选很好处理,反选和部分全选处理起来麻烦一些,需要判断父级是否为选中状态。具体的代码请采纳考示例。

示例效果图

在这里插入图片描述

示例源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-13
*/<template><div class="djs-box"><div class="topBox"><h3>vue中实现二维数组全选、全不选、反选、部分全选功能 </h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"><div class="box"><h4>二维数组</h4><div v-for="(item1,index1) in arr2" :key="index1"><el-checkbox v-model="item1.isChecked" @change="partAll(item1)"/>时间:{{item1.time}}<div v-for="(item2,index2) in item1.children" :key="index2" class="lh30">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox v-model="item2.isChecked" @change="partInverse(item1)" />内容:{{item2.info}}-代号-{{item2.code}} -- 原索引:{{item2.indexId}}</div></div><h4><el-button @click="chooseAll()" type="primary" size="mini"> 全选</el-button><el-button @click="clearAll()" type=

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

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

相关文章

Vue3+Vite连接高德地图JS API——地图显示、输入搜索

1 开通高德地图Web端JS API服务 1、进入高德地图API官网&#xff08;https://lbs.amap.com/&#xff09;&#xff1a; 2、注册登录。 3、进入控制台。 4、点击“应用管理”&#xff0c;点击“我的应用”&#xff0c;创建新应用。 5、添加Key&#xff0c;服务平台选择“Web端&…

BikeDNA(六)参考数据的内在分析2

BikeDNA&#xff08;六&#xff09;参考数据的内在分析2 1.数据完整性 见链接 2.网络拓扑结构 见链接 3.网络组件 断开连接的组件不共享任何元素&#xff08;节点/边&#xff09;。 换句话说&#xff0c;不存在可以从一个断开连接的组件通向另一组件的网络路径。 如上所述…

基于Hadoop的网上购物行为大数据分析及预测系统【flask+echarts+机器学习】前后端交互

有需要本项目或者部署的系统可以私信博主&#xff0c;提供远程部署和讲解 本研究基于淘宝用户行为的开源数据展开大数据分析研究&#xff0c;通过Hadoop大数据分析平台对阿里天池公开的开源数据集进行多维度的用户行为分析&#xff0c;为电商销售提供可行性决策。 首先我们将大…

基于遗传算法改进BP神经网络的承载力预测,基于ga-bp的破坏模式预测

目录 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数, BP神经网络的传递函数 遗传算法原理 遗传算法主要参数 遗传算法流程图 完整代码包含数据下载链接: 基于遗传算法改进BP神经网络的承载力预测,基于ga-bp的破坏模式预…

如何配置Kafka账号密码

背景 我们需要与第三方系统进行数据同步&#xff0c;需要搭建公网Kafka&#xff0c;Kafka默认是没有用户密码校验的&#xff0c;所以我们需要配置用户名密码校验。 配置 新增JAAS配置文件 在conf目录下新增kafka_server_jaas.conf文件&#xff0c;文件内容如下&#xff1a;…

ebpf学习

学习ebpf相关知识 参考资料: awesome-ebpf 文章目录 初识准备ebpf.io介绍cilium的介绍内核文档Brendan Greggs Blog 的介绍书籍Learning eBPFWhat is eBPF? 交互式环境视频 基础知识学习学习环境搭建书籍阅读 项目落地流程整理环境搭建内核编译bcc环境变量zliblibelflibbpflib…

python统计分析——小提琴图(sns.violinplot)

参考资料&#xff1a;用python动手学统计学&#xff0c;帮助文档 使用seaborn.violinplot()函数绘制箱线图 sns.violinplot()的做出来的小提琴图比plt.violinplot()更像小提琴。 import numpy as np import pandas as pd from matplotlib import pyplot as plt import seabo…

Spark的内核调度

目录 概述 RDD的依赖 DAG和Stage DAG执行流程图形成和Stage划分 Stage内部流程 Spark Shuffle Spark中shuffle的发展历程 优化前的Hash shuffle 经过优化后的Hash shuffle Sort shuffle Sort shuffle的普通机制 Job调度流程 Spark RDD并行度 概述 Spark内核调度任务: 1…

强化学习应用(四):基于Q-learning的无人机物流路径规划研究(提供Python代码)

一、Q-learning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个价值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是通过不断更新一个称为Q值的…

vue表格插件vxe-table导出 excel

vxe-table 默认支持导出 CSV、HTML、XML、TXT格式的文件&#xff0c;不支持 xlsx 文件 要想导出 xlsx 文件&#xff0c;需要使用 vxe-table-plugin-export-xlsx 依赖 参考&#xff1a;https://cnpmjs.org/package/vxe-table-plugin-export-xlsx/v/2.1.0-beta 1.安装 npm inst…

jetson orin nano 使用yolov8导出engine

1. 导出onnx 经过前面训练&#xff0c;得到了best.pt模型&#xff0c;现在想要使用tensorrt进行推理&#xff0c;需要先导出为onnx格式&#xff0c;再转化为engine格式。 yolo export modelbest.pt formatonnx opset12 simplifyTrue2.解决错误 在导出过程中&#xff0c;可能…

Android代码混淆

Android之代码混淆 代码混淆的作用设置混淆1. 在模块目录下的 build.gradle 文件中配置以下代码2. 在 proguard-rules.pro 文件中添加混淆规则 通用混淆规则常用匹配符常用命令注意事项如何查看是否已混淆 代码混淆的作用 1.令 APK 难以被逆向工程&#xff0c;即很大程度上增加…

开源项目CuteSqlite开发笔记(七):CuteSqlite释放BETA版本啦

经过大半年的开发&#xff0c;CuteSqlite程序代码不知不觉来到了6万行&#xff0c;有效行数4万行&#xff0c;CuteSqlite开发完成了一个小版本&#xff0c;进入下一个阶段&#xff0c;并于2024元旦释放BETA版本&#xff0c;有兴趣的朋友可以下载试用。 GitHub下载https://gith…

Handsfree_ros_imu:ROS机器人IMU模块的get_imu_rpy.py文件学习记录

上一篇博客写了关于Handsfree_ros_imu&#xff1a;ROS机器人IMU模块ARHS姿态传感器&#xff08;A9&#xff09;Liunx系统Ubuntu20.04学习启动和运行教程&#xff1a; https://blog.csdn.net/qq_54900679/article/details/135539176?spm1001.2014.3001.5502 这次带来get_imu_r…

池化、线性、激活函数层

一、池化层 池化运算是深度学习中常用的一种操作&#xff0c;它可以对输入的特征图进行降采样&#xff0c;从而减少特征图的尺寸和参数数量。 池化运算的主要目的是通过“收集”和“总结”输入特征图的信息来提取出主要特征&#xff0c;并且减少对细节的敏感性。在池化运算中…

ElasticSearch 学习9 spring-boot ,elasticsearch7.16.1实现中文拼音分词搜索

一、elasticsearch官网下载&#xff1a;Elasticsearch 7.16.1 | Elastic 二、拼音、ik、繁简体转换插件安装 ik分词&#xff1a;GitHub - medcl/elasticsearch-analysis-ik: The IK Analysis plugin integrates Lucene IK analyzer into elasticsearch, support customized d…

高质量训练数据助力大语言模型摆脱数据困境 | 景联文科技

目前&#xff0c;大语言模型的发展已经取得了显著的成果&#xff0c;如OpenAI的GPT系列模型、谷歌的BERT模型、百度的文心一言模型等。这些模型在文本生成、问答系统、对话生成、情感分析、摘要生成等方面都表现出了强大的能力&#xff0c;为自然语言处理领域带来了新的突破。 …

Spring Boot集成Redis简单示例

要在Spring Boot中集成Redis&#xff0c;你可以使用Spring Data Redis库来简化操作。 下面是一个示例代码&#xff1a; 首先&#xff0c;在你的Spring Boot项目的pom.xml文件中添加以下依赖&#xff1a; <dependencies><!-- 其他依赖... --><dependency>&…

springboot启动加载数据库数据到内存

1、概述 一般来说&#xff0c;springboot工程环境配置放在properties文件中&#xff0c;启动的时候将工程中的properties/yaml文件的配置项加载到内存中。但这种方式改配置项的时候&#xff0c;需要重新编译部署&#xff0c;考虑到这种因素&#xff0c;今天介绍将配置项存到数…

ROS2——launcher

在ROS2中&#xff0c;launcher 文件是通过Python构建的&#xff0c;它们的功能是声明用哪些选项或参数来执行哪些程序&#xff0c;可以通过 launcher 文件快速同时启动多个节点。一个 launcher 文件内可以引用另一个 launcher 文件。 使用 launcher 文件 ros2 launch 可以代替…