(vue)el-select选择框加全选/清空/反选

(vue)el-select选择框加全选/清空/反选


在这里插入图片描述


<el-form-item label="批次"><el-selectv-model="formInline.processBatch"multiplecollapse-tagsfilterableplaceholder="请选择"style="width: 250px"no-data-text="请先选择企业、日期、工序"@visible-change="piciSearch" //下拉打开/关闭时 事件><div class="select_up"><el-button type="text" @click="selectAll"><i class="el-icon-document-checked" />全选</el-button><el-button type="text" @click="removeTag"><i class="el-icon-document-delete" />清空</el-button><el-button type="text" @click="selectReverse"><i class="el-icon-document-copy" />反选</el-button></div><div class="select_list"><el-optionv-for="item in piciOptions":key="item.batchNum":label="item.batchNum":value="item.batchNum"/></div></el-select>
</el-form-item>

js


// 清空操作
removeTag() {this.formInline.processBatch = []
},
// 全选操作
selectAll(val) {val = []this.piciOptions.map(item => {val.push(item.batchNum)})this.formInline.processBatch = val
},
// 反选操作
selectReverse(val) {val = []this.piciOptions.map(item => {const index = this.formInline.processBatch.indexOf(item.batchNum)// 判断现有选中数据是否包含如果不包含则进行反选数据if (index !== -1) {// formInline.processBatch.splice(index, 1)} else {val.push(item.batchNum)}})this.formInline.processBatch = val
},

解决参考

1.全选/清空/反选

在这里插入图片描述
2.全选/反选

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

程序员英语之Spring篇

spring.io/quickstart 本期课程讲解Spring官网的快速上手页面 官网地址 https://spring.io/quickstart Spring Quickstart Guide Spring 快速开始指南 Guide 指南 What you’ll build 接下来你将要构建的是什么&#xff1f; build 构建 You will build a classic “H…

科学高效备考AMC8和AMC10竞赛,吃透2000-2024年1850道真题和解析

如何在校内学习之余科学、有效地备考AMC8、AMC10美国数学竞赛&#xff1f;多做真题&#xff0c;吃透真题是科学有效的方法之一&#xff0c;通过做真题&#xff0c;可以帮助孩子找到真实竞赛的感觉&#xff0c;而且更加贴近比赛的内容&#xff0c;可以通过真题查漏补缺&#xff…

AIGC技术的发展现状与未来趋势

AIGC&#xff08;人工智能生成内容&#xff09;技术是近年来快速发展的领域之一&#xff0c;它涉及使用人工智能来创建或编辑内容&#xff0c;包括文本、图像、音乐和视频等。这项技术的进步为各个行业带来了革命性的变化&#xff0c;同时也引发了一系列伦理和风险问题。 一、技…

ACL的知识点和实验

1.ACL的组成 ACL由若干条permit或deny语句组成。每条语句就是该ACL的一条规则&#xff0c;每条语句中的permit或deny就是与这条规则相对应的处理动作。 2.规则编号 &#xff08;1&#xff09;一个ACL中的每一条规则都有一个相应的编号。 &#xff08;2&#xff09;步长是系…

嵌入式Linux driver开发实操(二十二):写一个ALSA驱动程序

如何编写ALSA(高级Linux声音体系结构)驱动程序?比如PCI声卡。在其他设备类型的情况下,API也可能有所不同。然而,至少ALSA内核API是一致的。对开发者而言需要具备足够的C语言技能和基本的linux内核编程知识。什么时在ALSA上编写PCI声音驱动程序的标准方法? ALSA驱动程序的…

mysql-connector-java和spring-boot-starter-jdbc和mybatis-spring-boot-start

mysql-connector-java和spring-boot-starter-jdbc和mybatis-spring-boot-start JDBC是什么意思&#xff1f; JDBC是使用java语言操作mysql数据库的规范&#xff0c;java语言必须按照这个规范写才可以操作mysql数据库。 mysql-connector-java 在最开始的时候 程序中是不允许…

游泳耳机怎么选?这四款游泳耳机一定要看!综合实力遥遥领先!

如今&#xff0c;在健康生活的风潮推动下&#xff0c;游泳作为一种全身性的有氧运动&#xff0c;不仅深受广大健身爱好者的青睐&#xff0c;更是许多人夏季消暑、塑形和放松心情的首选方式。而随着科技的不断进步&#xff0c;传统的游泳体验也逐渐与现代科技产品相结合&#xf…

2024.04.24记录所解决的问题

一解决了使用VM虚拟机作为dubbo-admin服务器提供者在浏览器访问失败问题 一开始在服务器上面即使运行了zookeeper和dubbo-admin容器都没有访问出dubbo-admin的界面管理器。查看了其他映射端口以及注册中心的地址等等其他参数&#xff0c;都不行&#xff0c;然后就一直没有去处…

JetBrains RubyMine v2024.1 安装教程 (Rails/Ruby集成开发环境)

前言 JetBrains RubyMine是一款杰出而全面的Ruby代码编辑器&#xff0c;能够深入识别动态语言的细节&#xff0c;为用户提供智能编码辅助功能。它能够自动检测错误代码段&#xff0c;并提供智能的编写和修复代码的建议&#xff0c;帮助用户进行代码重构。此外&#xff0c;Ruby…

前端css中filter(滤镜)的使用

前端css中filter的使用 一、前言二、补充内容说明三、模糊&#xff08;一&#xff09;、模糊效果&#xff0c;源码1&#xff08;二&#xff09;、源码1运行效果1.视频演示2.截图演示 四、阴影&#xff08;一&#xff09;、阴影效果&#xff0c;源码2&#xff08;二&#xff09;…

SS26A-ASEMI超低VF值肖特基SS26A

编辑&#xff1a;ll SS26A-ASEMI超低VF值肖特基SS26A 型号&#xff1a;SS26A 品牌&#xff1a;ASEMI 封装&#xff1a;SMA 最大平均正向电流&#xff08;IF&#xff09;&#xff1a;2A 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;60V 最大正向电压&a…

社交媒体数据恢复:Facebook

在使用Facebook的过程中&#xff0c;可能会出现数据丢失的情况&#xff0c;如误删了重要的帖子、照片或其他文件。在这种情况下&#xff0c;你可以尝试以下方法来恢复Facebook的数据。 首先&#xff0c;确保你备份了Facebook的数据。如果你定期备份数据&#xff0c;那么恢复起…

探索SmartEDA:电路仿真的教学新境界

在电子工程的教学领域&#xff0c;随着技术的飞速发展&#xff0c;传统的教学方法已经难以满足现代学生的学习需求。近年来&#xff0c;电路仿真软件在教学中的应用逐渐受到关注&#xff0c;而SmartEDA作为一款功能强大的电路仿真软件&#xff0c;为电子工程教学带来了革命性的…

GaussDB数据库SQL系列-聚合函数

背景 在这篇文章中&#xff0c;我们将深入探讨GaussDB数据库中聚合函数的使用和优化。聚合函数是数据库查询中非常重要的工具&#xff0c;它们可以对一组值执行计算并返回单个值。例如&#xff0c;聚合函数可以用来计算平均值、总和、最大值和最小值。 这些功能在数据分析和报…

梦境绘师:揭秘生成对抗网络(GAN)的魔法

梦境绘师&#xff1a;揭秘生成对抗网络&#xff08;GAN&#xff09;的魔法 1 引言 在今日的深度学习领域&#xff0c;生成对抗网络&#xff08;GAN&#xff09;已成为一项无人能外的技术&#xff0c;以其独特的数据生成能力俘获了无数研究者和工程师的心。这项技术不仅在理论上…

JS----前端将列表数据转树型数据

前端将列表数据转树型数据 场景&#xff1a;后端返回列表数据&#xff0c;由前端根据业务需求完成树型数据转换&#xff0c; 常用于侧边导航菜单&#xff0c;下拉树型数据项等 export function listToTree(data: []) {var map: any {},tree: any []data.forEach((item: any…

【缓存服务】⭐️自定义实现一个简易的数据缓存

目录 &#x1f378;前言 &#x1f37b;手写缓存服务 &#xff08;1&#xff09;缓存实体类 &#xff08;2&#xff09;缓存工具类 &#xff08;3&#xff09;测试缓存服务 &#x1f377;已有的缓存工具 &#x1f379;章末 &#x1f378;前言 俗话说 有轮子不用 就是玩 开个…

Qt 菜单栏上手教程:QMenuBar QMenu QToolbar

引言 在Qt框架中&#xff0c;QMenuBar、QMenu、QToolbar和QAction都是用于构建应用程序界面中的用户交互元素。 QMenuBar 是什么&#xff1a;QMenuBar是一个用于创建横向菜单栏的类。在桌面应用程序中&#xff0c;它通常位于窗口的顶部。应用场景&#xff1a;当您需要一个包含…

vue快速入门(四十)非父子组件通信

注释很详细&#xff0c;直接上代码 上一篇 新增内容 媒介js的创建发送组件发送事件示例接收组件接收事件示例 源码 App.vue <template><div id"app"><TessFirst></TessFirst><TestSecond></TestSecond></div> </templ…

音视频直播原理解析

直播原理就是一个推流和拉取流的过程&#xff1b; 直播端将直播流推送至服务器&#xff0c;用户端发起请求从服务器拉取直播流然后解码播放 第一部分就是视频直播端的操作&#xff1a;视频采集处理后推流到流媒体服务器。 首先从前端采集设备中获得原始的音频、视频数据&…