vue2中,下拉框多选和全选的实现

vue2中,下拉框多选和全选的实现

  • 代码布局
    • 在methods: 中添加功能函数
    • 较为完整的一个整体代码:

在这里插入图片描述
如图所示点击全选即可完成下拉框中全部子项的全部的选中,同时取消全选即可全部取消选择。

代码布局

  <div class="chos-box2"><span>屏蔽策略名称</span><el-selectv-model="cluster_nameArr"filterablesize="small"multipleplaceholder="多选(可全选)"collapse-tags="collapseTags"clearable@change="searchDataHA"><el-optionlabel="全选"value="全选"@click.native="selectAllHA"v-if="options4.length"></el-option><el-optionv-for="item in options4":key="item":label="item":value="item"></el-option></el-select></div>

相关的el参数可以查询,

在methods: 中添加功能函数

method:{searchDataHA(val) {if (!val.includes("全选") && val.length === this.options4.length) {this.cluster_nameArr.unshift("全选");} else if (val.includes("全选") &&val.length - 1 < this.options4.length) {this.cluster_nameArr = this.cluster_nameArr.filter((item) => {return item !== "全选";});}this.page = 1;this.getConfigData();//用来请求数据的函数},}

较为完整的一个整体代码:

<template>
<div class="chos-box2"><span>屏蔽策略名称</span><el-selectv-model="cluster_nameArr"filterablesize="small"multipleplaceholder="多选(可全选)"collapse-tags="collapseTags"clearable@change="searchDataHA"><el-optionlabel="全选"value="全选"@click.native="selectAllHA"v-if="options4.length"></el-option><el-optionv-for="item in options4":key="item":label="item":value="item"></el-option></el-select></div></template><script>export default {data() {// 已选中选项mulSelecteds: {type: Array,default() {return [];},},collapseTags: {type: Boolean,default: true,},}method:{searchDataHA(val) {if (!val.includes("全选") && val.length === this.options4.length) {this.cluster_nameArr.unshift("全选");} else if (val.includes("全选") &&val.length - 1 < this.options4.length) {this.cluster_nameArr = this.cluster_nameArr.filter((item) => {return item !== "全选";});}this.page = 1;this.getConfigData();//用来请求数据的函数},selectAllHA() {if (this.cluster_nameArr.length < this.options4.length) {this.cluster_nameArr = [];this.options4.map((item) => {this.cluster_nameArr.push(item);});this.cluster_nameArr.unshift("全选");} else {// 取消全选this.cluster_nameArr = [];}console.log("全选", this.checked, this.options2, this.selectedArr);},},watch: {//用来监听变量mulSelecteds: {handler(newVal, oldVal) {this.selectedArr = newVal;if (!this.selectedArr.includes("全选") &&this.selectedArr.length &&this.selectedArr.length === this.options2.length) {this.selectedArr.unshift("全选");}},immediate: true,},},}</script>
<style lang="scss" scoped>.chos-box2 {margin-right: 25px;span {display: inline-block;width: 115px;}}
</style>

}

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

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

相关文章

如何给照片添加水印?请看下面3个简单教程

如何给照片添加水印&#xff1f;随着智能手机的普及和不断提升的拍摄技术&#xff0c;如今人们可以轻松使用手机进行高质量的照片拍摄。从老人到小孩&#xff0c;每个人都可以在日常生活中捕捉到美好瞬间&#xff0c;并将其记录下来。作为一种表达自己的方式&#xff0c;现在手…

安装pythonQt报错

在使用命令行pip install PyQt5安装pythonQt5的时候报错。 镜像源有问题&#xff0c;手动设置可用的源 pip install PyQt5 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com tool工具 pip install PyQt5-tools -i https://pypi.douban.com/simple 安装成…

以赛促教,以赛促研 ——计算机科学系举办“火焰杯”软件测试开发选拔赛颁奖仪式

颁奖仪式 2023年3月9日&#xff0c;第三届“火焰杯”软件测试开发选拔赛颁奖仪式在南海楼124会议室举行&#xff0c;计算机科学系系主任龙锦益教授、指导老师孙玉霞副教授、测吧科技有限公司王雪冬总监及获奖同学参加了颁奖仪式。 会议伊始&#xff0c;龙锦益教授对王雪冬总监…

Jupyter Notebook 设置黑色背景主题

Jupyter Notebook 设置黑色背景主题 # 包安装 pip install jupyterthemes -i https://mirrors.aliyun.com/pypi/simple pip install --upgrade jupyterthemes # 查看可用主题 jt -l # monokai暗背景&#xff0c;-f(字体) -fs(字体大小) -cellw(占屏比或宽度) -ofs(输出段的字…

labelimg使用以及xml和txt转化

一、使用 winr——输入cmd 激活已有的环境 conda activate torch1.2.0 下载lebelme pip install labelme3.16.7 再输入labelme打开软件就可 可以设置自动保存&#xff0c;View——auto save mode打上勾 二、注意 1.自己类的定义名称&#xff0c;在txt中是0&#xff0c;1&a…

java: 警告: 源发行版 8 需要目标发行版 1.8;(可我的项目是其他版本啊?)

我的项目是1.7 可运行时却要求是1.8 情况1 提示需要1.8 而你刚好项目就是1.8 那么就是配置问题 这里就不描述怎么解决了 方案很多。 情况2 项目用的不是XX版本却提示需要XX版本 在你的Maven目录的conf文件夹下settings.xml中下面 不知道maven目录在哪从这里看 如果这里指…

H指数----题解报告

题目&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 由题目可知&#xff0c;我们要寻找的是一个最大的H值。 首先先对引用次数排序&#xff0c;然后再寻找在规定内的最大H值 public int hIndex(int[] citations) {Arrays.sort(citatio…

git初学者使用教程(包含Android studio中git使用)

文章目录 1、登录 / 注册git账号2、创建git仓库3、设置git的用户名和邮箱4、创建git仓库5、已有仓库推送代码到远程仓库6、进阶使用&#xff0c;命令行和Android studio软件使用1. 克隆&#xff08;Clone&#xff09;源码仓库2. 查看仓库状态&#xff08;Status&#xff09;3. …

【已解决】Word文档的“打开密码”在哪里设置?

我们知道&#xff0c;Word文档可以设置“打开密码”&#xff0c;保护文件不被随意打开&#xff0c;只有输入正确的密码才能打开文档。那这个“打开密码”要在哪里设置呢&#xff1f;不清楚的小伙伴往下看就知道啦。 在Word文档里&#xff0c;有两个路径可以设置“打开密码”。…

扩散模型学习——代码学习

文章目录 引言正文UNet网络结构训练方法DDPM采样方法讲解Context上下文信息添加DDIM的方法详解 总结参考 引言 这是第一次接触扩散模型&#xff0c;为了学习&#xff0c;这里好好分析一下他的代码 正文 UNet网络结构 这部分主要是定义一下网络结构&#xff0c;以及相关的网…

递归方法实现字符串反转函数

递归函数是一种在函数内部调用自身的函数。它通过将复杂的问题分解成更小的子问题来解决。递归函数通常包含两部分&#xff1a;基本情况和递归调用。请使用递归方法实现字符串反转的C语言函数。 #include <stdio.h>void reverseString(char* str) {///Begin///// 递归基…

极智嘉(Geek+)柔性货箱到人拣选方案,助力Starlinks实现高效运营

近些年&#xff0c;电商业务席卷全球&#xff0c;一众企业蓬勃发展。比如沙特阿拉伯先进的物流与供应链解决方案供应商Starlinks的电子商务的销售额从6%增长到了23%。为满足日益增长的国际电商业务需求&#xff0c;以及订单交付时效性更高的要求&#xff0c;Starlinks与全球仓储…

领先一步,效率翻倍:PieCloudDB Database 预聚集特性让查询速度飞起来!

在大数据时代&#xff0c;如何有效地管理和处理海量数据成为了企业面临的核心挑战。为此&#xff0c;拓数派推出了首款数据计算引擎 PieCloudDB Database&#xff0c;作为一款全新的云原生虚拟数仓&#xff0c;旨在提供更高效、更灵活的数据处理解决方案。 PieCloudDB 的设计理…

Linux入门攻坚——4、shell编程初步、grep及正则表达式

bash的基础特性&#xff08;续&#xff09;&#xff1a; 1、提供了编程环境&#xff1a; 编程风格&#xff1a;过程式&#xff1a;以指令为中心&#xff0c;数据服务于执行&#xff1b;对象式&#xff1a;以数据为中心&#xff0c;指令服务于数据 shell编程&#xff0c;编译执…

智能井盖传感器详细使用效果是什么?

随着每一个城市基础设施在不断完善&#xff0c;城市建设过程之中&#xff0c;井盖的数量也在处于不断增加阶段&#xff0c;在大街小巷之中随处可见形式各类&#xff0c;大小不一的井盖。看似结实牢固的井盖&#xff0c;但是可能由于时间问题&#xff0c;导致年久失修&#xff0…

Spring Boot集成SpringFox 3.0与Pageable参数处理

Springfox 3.0有多个模块&#xff0c;提供了spring boot starter&#xff0c;与Spring Boot集成时仅需引入springfox-boot-starter&#xff0c;如下&#xff1a; <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter<…

经典卷积神经网络 - LeNet

该模型用于手写的数字识别。 LeNet模型包含了多个卷积层和池化层&#xff0c;以及最后的全连接层用于分类。其中&#xff0c;每个卷积层都包含了一个卷积操作和一个非线性激活函数&#xff0c;用于提取输入图像的特征。池化层则用于缩小特征图的尺寸&#xff0c;减少模型参数和…

免费领取!TikTok Shop “全托管”黑五大促官方备战指南来啦!

黑五网一大促即将来袭&#xff0c;自“全托管”模式上线以来&#xff0c;TikTok for Business在沙特阿拉伯和英国市场开展了古尔邦节大促、夏季大促、返校季大促等活动&#xff0c;今年更是会借着黑五网一大促之际&#xff0c;首次覆盖美国市场&#xff0c;为全托管商家带来全球…

如何在Potplayer中使用公网访问群晖WebDav?

文章目录 1 使用环境要求&#xff1a;2 配置webdav3 测试局域网使用potplayer访问webdav4 内网穿透&#xff0c;映射至公网5 使用固定地址在potplayer访问webdav ​ 国内流媒体平台的内容让人一言难尽&#xff0c;就算是购买了国外的优秀作品&#xff0c;也总是在关键剧情上删删…

系统性认知网络安全

前言&#xff1a;本文旨在介绍网络安全相关基础知识体系和框架 目录 一.信息安全概述 信息安全研究内容及关系 信息安全的基本要求 保密性Confidentiality&#xff1a; 完整性Integrity&#xff1a; 可用性Availability&#xff1a; 二.信息安全的发展 20世纪60年代&…