064: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-11
*/<template><div class="djs-box"><div class="topBox"><h3>vue中一维数组全选、全不选、反选 </h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"><div class="box"><h4>变换后的一维数组</h4><p v-for="(item,index) in arr1" :key="index"><el-checkbox v-model="item.isChecked" >内容:{{item.info}}-时间:{{item.time}}</el-checkbox></p><h4><el-button @click="chooseAll()" type="primary" size="mini"> 全选</el-button><el-button @click="clearAll()" type="primary" size="mini"> 全不选</el-button><el-button @click="inverse()" type="primary" size="mini">反选</el-button></h4></div></div></div>
</template><script>export default {data() {return {isCart: false,arr: [{'time': '2023-12-07','code': 'S10','Gname': 'G10','info': '大剑师1'},{'time': '2023-12-07','code': 'S10','Gname': 'G10','info': '大剑师2'},{'time': '2023-12-07','code': 'S11','Gname': 'G11','info': '大剑师3'},{'time': '2023-12-08','code': 'S10','Gname': 'G10','info': '大剑师4'},{'time': '2023-12-08','code': 'S11','Gname': 'G11','info': '大剑师5'},{'time': '2023-12-09','code': 'S12','Gname': 'G12','info': '大剑师6'}],arr1: [],}},mounted() {this.arr1 = this.dajianshi_arr1to1(this.arr);console.log(this.arr1)},methods: {chooseAll(){for(let i=0;i<this.arr1.length;i++){this.$set(this.arr1[i],'isChecked', true)}				},clearAll(){for(let i=0;i<this.arr1.length;i++){this.$set(this.arr1[i],'isChecked', false)}},inverse(){for(let i=0;i<this.arr1.length;i++){let x=this.arr1[i].isChecked;this.$set(this.arr1[i],'isChecked', !x)}},dajianshi_arr1to1(arr) {let newArr = arr.map((item, index) => {return {...item,isChecked: false,}})return newArr;},}}
</script>
<style scoped>.djs-box {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid blueviolet;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: black;color: #fff;}.dajianshi {width: 98%;height: 520px;margin: 20px auto 0;}.box {width: 50%;height: 100%;margin: 0 auto;overflow-y: auto;background: #fed;padding-left: 15px;text-align: center;box-sizing: border-box;}
</style>

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

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

相关文章

openssl3.2 - 官方demo学习 - digest - EVP_MD_xof.c

文章目录 openssl3.2 - 官方demo学习 - digest - EVP_MD_xof.c概述笔记END openssl3.2 - 官方demo学习 - digest - EVP_MD_xof.c 概述 使用支持XOF方式的摘要算法(e.g. SHAKE256), 对buffer进行摘要, 并和预留的摘要值进行比对 笔记 /*! \file EVP_MD_xof.c \note openssl3…

DHCP中继【新华三】

理论【DHCP服务器可以对其直连的网段中的pc&#xff0c;分配其IP地址等服务&#xff0c;但是&#xff0c;对于跨网段进行分配IP地址&#xff0c;需要中间有DHCP中继进行传达&#xff0c;由DHCP中继指定DHCP服务器的位置&#xff0c;可以很好的对其跨网段分配IP地址起到指引的作…

限时福利,Adobe InCopy2024下载安装指南

Adobe InCopy 下载链接 https://pan.baidu.com/s/16j5MiXqfGw6puQbgyQnJSQ?pwd0531 #2024版本 1.鼠标右击【InCopy2024(64bit)】压缩包&#xff08;win11及以上系统需先点击“显示更多选项”&#xff09;【解压到 InCopy2024(64bit)】。 2.打开解压后的文件夹&#xff0c;鼠…

Kubernetes 1.24正式发布,2022年首个大版本更新

介绍 早在 2020 年 12 月&#xff0c;Kubernetes 就宣布弃用 Dockershim。在 Kubernetes 中&#xff0c;dockershim 是一个软件 shim&#xff0c;它允许您将 Docker 引擎用作 Kubernetes 中的容器运行时。 这个版本包含 46 个增强功能&#xff1a;14 个增强功能已经升级到稳定…

【软件测试】学习笔记-设计GUI自动化测试策略

这篇文章从“实战”这个角度展开&#xff0c;探讨实际的大型全球化电商网站的GUI自动化测试如何开展。这场实战&#xff0c;从以下两个方面展开&#xff1a; 测试策略如何设计&#xff1f;这一点&#xff0c;我会根据亲身经历的实际项目&#xff0c;和你探讨GUI测试的分层测试…

Leetcode26——引出c++ vector中erase()的内部原理

erase是对数组中某个元素进行删除的操作&#xff0c;实际的时间复杂度为O(n) 预备知识 数组在内存中是连续存储的&#xff0c;删除某个位置的时候不能直接删除&#xff0c;只能用后序的元素覆盖 以nums数组为例&#xff0c;target为需要删除的目标数据 方法&#xff1a; ①…

codeforces (C++ Satisfying Constraints)

题目&#xff1a; 翻译&#xff1a; 思路&#xff1a; 1、找到最大的下限min 2、找到最小的上限max 3、则max-min1满足1、2约束条件的个数 4、max-min1减去约束条件3的个数&#xff0c;即为最终答案 5、如果min大于max&#xff0c;则结果为0&#xff0c;不存在满足约束条件的数…

【天龙怀旧服】攻略day7

关键字&#xff1a; 新星1.49、金针渡劫、10灵 1】新星&#xff08;苍山破煞&#xff09; 周三周六限定副本&#xff0c;19.00-24.00 通常刷1.49w&#xff0c;刷149点元佑碎金 boss选择通常为狂鬼难度&#xff0c;八风不动即放大不选&#xff0c;第二排第一个也不选&#xf…

RSIC-V“一芯”学习笔记(二)——Linux入门教程

文章目录 一、前言二、Busybox套件三、重要的追踪工具——strace四、Shell五、正则表达式六、重定向&#xff08;多次输入测试时&#xff09;七、一些组合命令八、自动化脚本九、学会查阅十、亲&#xff08;yuan&#xff09;近(li) bai du十一、不要逃避困难十二、重视小问题 一…

Grounding DINO:开放集目标检测,将基于Transformer的检测器DINO与真值预训练相结合

文章目录 背景知识补充CLIP (Contrastive Language-Image Pre-training)&#xff1a;打破文字和图像之间的壁垒DINO(Data-INterpolating Neural Network)&#xff1a;视觉 Transformer 的自监督学习Stable Diffusion&#xff1a;从文本描述中生成详细的图像Open-set Detector开…

分布式事务2PC、3PC

1、概念 分布式事务的二阶段提交&#xff08;Two-Phase Commit, 2PC&#xff09;和三阶段提交&#xff08;Three-Phase Commit, 3PC&#xff09;是用于处理分布式系统中事务一致性的两种不同的协议。这两种协议的主要区别在于其阶段数和容错性。 二阶段提交&#xff08;2PC&am…

Vue生成图片并下载

一、安装 html2canvas 在项目安装库 html2canvas npm i html2canvas 二、生成图片 在页面局部加载 html2canvas 库&#xff0c;调用方法生成 <template><div class"page-box"><div class"text-box">文本转图片</div></div>…

【教3妹学编程-算法题】最大频率元素计数

2哥 : 3妹&#xff0c;最近有个电视剧《繁花》非常火&#x1f525;&#xff0c;你听说了吗&#xff1f; 3妹&#xff1a;没有&#xff0c;最近一直在忙着找工作&#xff0c;哪有时间看电视啊 2哥 : 啊&#xff1f;大周末还不休息一下啊&#xff0c;这么辛苦。 3妹&#xff1a;当…

Video接口介绍

屏库 https://m.panelook.cn/index_cn.php Open LDI, open lvds display interface OpenLDI and LVDS是兼容的&#xff0c; 是一种电平 https://www.ti2k.com/178597.html MIPI DSI/Camera crosLink FPD-LINK(Flat panel display link)是National(TI) LVDS技术&#xff0c; …

如何在线生成App:将网页封装成APP

在数字化时代&#xff0c;App已成为我们日常生活中不可或缺的一部分。然而&#xff0c;对于众多企业和个人开发者来说&#xff0c;开发一个原生App既耗时又耗资&#xff0c;尤其当他们已经拥有一个功能完备的网站时。幸运的是&#xff0c;现在有一种方法可以将现有的网页封装成…

k8s node节点加入集群,token过期

1、master01节点执行 kubeadm token create --print-join-command 2、执行命令 kubeadm join 192.168.0.236:16443 --token qucd8q.hsfq4a1afluzaky3 --discovery-token-ca-cert-hash sha256:92175a356db070deb2ddd3823e288e3005a4baeec9b68580dcc11ce4d3767195 3、查看node02…

银行家算法/Banker‘s Algorithm

银行家算法&#xff08;Bankers Algorithm&#xff09;是一个避免死锁&#xff08;Deadlock&#xff09;的著名算法&#xff0c;由艾兹格迪杰斯特拉在1965年为T.H.E系统设计的一种避免死锁产生的算法。它以银行借贷系统的分配策略为基础&#xff0c;判断并保证系统的安全运行。…

【含完整代码】Java定时任务之xxl-job[超详细]

前言 个人博客&#xff1a;www.wdcdbd.com 在Java中使用定时任务是一件很常见的事情&#xff0c;比如使用定时任务在什么时间&#xff0c;什么时候&#xff0c;去发布一些信息&#xff0c;或者去查询一些日志等相关的代码。这时&#xff0c;我们就要开发定时任务这中功能来实现…

PyGWalker,一款超级强大的数据分析和数据可视化的工具库

PyGWalker可以有效简化Jupyter笔记本的数据分析和数据可视化工作流程&#xff0c;方法是将panda数据帧转换为Tableau风格的用户界面进行可视化探索。 PyGWalker被命名为“Graphic Walker的Python绑定”的缩写。它集成了Jupyter笔记本&#xff08;或其他基于Jupyter的笔记本&am…

LeetCode83. Remove Duplicates from Sorted List

文章目录 一、题目二、题解 一、题目 Given the head of a sorted linked list, delete all duplicates such that each element appears only once. Return the linked list sorted as well. Example 1: Input: head [1,1,2] Output: [1,2] Example 2: Input: head [1,1…