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

news/2024/5/18 19:35:21/文章来源:https://blog.csdn.net/qq_45496282/article/details/133994278

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.luyixian.cn/news_show_187583.aspx

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

相关文章

MySQL恢复不小心误删的数据记录(binlog)-生产实操

同事操作删除生产数据时&#xff0c;未及时备份导致误删除部份数据。现通过mysql的binlog日志回滚数据。 1.由于我们第一时间找到相应的操作时间的大概在12点~13点之间操作删除了product和product_item表的部份数据。因此我们只要找到这期间的binlog文件就行了&#xff0c; 脚…

pytorch 入门 (四)案例二:人脸表情识别-VGG16实现

实战教案二&#xff1a;人脸表情识别-VGG16实现 本文为&#x1f517;小白入门Pytorch内部限免文章 参考本文所写记录性文章&#xff0c;请在文章开头注明以下内容&#xff0c;复制粘贴即可 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参…

系统性认知网络安全

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

Linux tmux使用总结

文章目录 1 tmux介绍2 tmux概念会话Sessions、窗口Windows、面板Panesstatus line中字段含义 3 Sessions会话管理新建会话断开当前会话进入之前的会话关闭会话查看所有的会话 4 tmux快捷指令系统指令窗口&#xff08;Windows&#xff09;指令面板&#xff08;Panes&#xff09;…

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

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

什么是接口测试?三分钟带你全面认识接口测试、带你学会接口测试~

目录 1、接口是什么&#xff1f; 2、接口的类型 3、接口测试初识 3.1、什么是接口测试 3.2、原理 3.3、特点 3.4、什么是自动化接口测试 4、接口测试流程 5、传统风格接口与RESTful风格接口 6、接口文档 6.1、什么是接口文档 6.2、接口文档作用 6.3、展现形式 6.4…

formData对象打印不出来

用el-upload上传图片 以流的形式传给后台 所以用formData对象带数据 let formData new FormData() formData.append(name&#xff0c;monkey7) console.log(formData) 明明已经把数据append进去了 console.log在控制台却打印不出 后来发现他得用formData.get("xxx"…

最全的图床集合(国内外,站长必备)

“heosu每月不定时更新嗷&#xff0c;防止错过消息推送&#xff0c;建议小伙伴添加到星标⭐喔” 为了减少服务器的压力不少站长还是选择图床存放图片的。所以就搜集一些比较好用的免费的图床&#xff08;收费的在最后标出&#xff09;以及我目前在用的图床。 为什么需要图床&am…

Linux系统CH347应用—SPI功能

Linux/安卓系统使用CH347转接SPI功能有三种应用方式&#xff1a; 1. 使用CH34X_MPHSI_Master总线驱动为系统扩展原生SPI Master&#xff0c;此方式无需进行单独的应用层编程&#xff1b; 2. 使用CH341PAR_LINUX字符设备驱动&#xff0c;此方式需要配合使用厂商提供的库文件&a…

【springcloud-config】配置中心客户端导入依赖spring-cloud-config-server后,maven一直爆红问题解决

问题描述 配置中心客户端导入了 spring-cloud-config-server 后&#xff0c;导入依赖爆红&#xff1b; 解决办法&#xff1a; 参考官网中文文档&#xff1a;spring-cloud -config 配置中心 中文文档 补充导入 spring-config-starter-config 配置即可 <!--springcloud-c…

跨境商城源码可以支持多种营销推广方式吗?

一、多种营销推广方式的重要性 跨境商城源码作为现代电商领域的重要工具&#xff0c;其支持多种营销推广方式对于吸引用户、增加销量以及提升品牌影响力都至关重要。通过采用多种营销推广方式&#xff0c;商家可以全方位地宣传和推广产品&#xff0c;吸引更多的潜在顾客&#x…

JS多选答题时,选项互斥时的情况

在做答题类的项目时&#xff0c;应该会比较常见多选题选相互斥的问题&#xff0c;例如&#xff1a; 你喜欢什么颜色&#xff1f;&#xff08;&#xff09;A、红色B、紫色C、蓝色D、灰色E、均无如该题&#xff0c;当选择选项E时&#xff0c;明显与其他选项互斥。这个时候经常会…

SAP 公司间销售

一、 概述 很多项目中&#xff0c;特别是集团型公司&#xff0c;生产总部在某地&#xff0c;但是在各个省会城市&#xff0c;乃至国外都有相应的贸易公司&#xff0c;特别是国外&#xff0c;此时贸易公司接到客户采购订单&#xff0c;但是贸易公司没有库存&#xff0c;甚至没有…

Zoho Mail荣登福布斯小型企业企业邮箱排行榜

在过去的数十载里&#xff0c;电子邮件已成为电子通信领域中不可或缺的一环&#xff0c;而在未来的岁月里&#xff0c;它有望继续在全球范围内普及应用。尽管如今市场上有许多免费的企业邮箱供用户和企业选用&#xff0c;但其中许多产品在特定场景下的专业化功能尚显不足&#…

selenium多窗口、多iframe切换、alert切换

多标签/多窗口之间的切换 场景&#xff1a; 在页面操作过程中有时候点击某个链接会弹出新的窗口&#xff0c;这时就需要切换到新打开的窗口上进行操作。这种情况下&#xff0c;需要识别多标签或窗口的情况。 操作方法&#xff1a; switch_to.window()方法&#xff1a;切换窗口…

如何高效的开展app的性能测试?

APP性能测试是什么 从网上查了一下&#xff0c;貌似也没什么特别的定义&#xff0c;我这边根据自己的经验给出一个自己的定义&#xff0c;如有巧合纯属雷同。 客户端性能测试就是&#xff0c;从业务和用户的角度出发&#xff0c;设计合理且有效的性能测试场景&#xff0c;制定…

js给一段话,遇到的第一个括号处加上换行符

list.forEach((item,index0)>{const productName item.name;const index productName.indexOf(&#xff08;);if (index -1) {return productName;}const before productName.slice(0, index);const after productName.slice(index);item.namebefore \n after;});

吃透Spring源码分析专题

想说的话 本人在互联网摸爬滚打至今(23年)6年了&#xff0c;平时有写博客的习惯&#xff0c;这个习惯是从大学的时候开始的&#xff0c;目前主要关注java领域相关的技术&#xff0c;python也有涉及&#xff0c;写Spring专题是因为Spring确实很重要&#xff0c;在目前这个开发模…

【C++】二叉树进阶 -- 详解

一、二叉搜索树概念 二叉搜索树 又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点…

AI驱动的图纸数据提取

推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 你是否曾经需要组合来自两个不同来源&#xff08;例如图像和文本&#xff09;的对象数据&#xff1f; 我们在工作的过程中经常面临这样的挑战。 在这里&#xff0c;我们展示了技术绘图领域的一个示例。 此类图纸用于许多领…