(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://www.mzph.cn/news/824412.shtml

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

相关文章

《Kubernetes部署篇:基于Kylin V10+ARM架构CPU+外部etcd使用containerd部署K8S 1.26.15容器版集群(一主多从)》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;企业级K8s集群运维实战 1、在当前实验环境中安装K8S1.25.14版本&#xff0c;出现了一个问题&#xff0c;就是在pod中访问百度网站&#xff0c;大…

UTS iOS插件

1、UTS插件无法出现 再uniapp x中使用时&#xff0c;必须给这个插件高度和宽度&#xff0c;否则出不来&#xff01; <uts-hello-view buttonText"点击按钮内容" style"width:375px;height: 375px;background-color: aqua;"></uts-hello-view>…

python后端相关知识点汇总(十二)

python知识点汇总十二 1、什么是 C/S 和 B/S 架构2、count(1)、count(*)、count(列名)有啥区别&#xff1f;3、如何使用线程池3.1、为什么使用线程池&#xff1f; 4、MySQL 数据库备份命令5、supervisor和Gunicorn6、python项目部署6.1、entrypoint.sh制作6.2、Dockerfile制作6…

OpenCV基本图像处理操作(十)——图像特征harris角点

角点 角点是图像中的一个特征点&#xff0c;指的是两条边缘交叉的点&#xff0c;这样的点在图像中通常表示一个显著的几角。在计算机视觉和图像处理中&#xff0c;角点是重要的特征&#xff0c;因为它们通常是图像中信息丰富的区域&#xff0c;可以用于图像分析、对象识别、3D…

DDoS攻击愈演愈烈,谈如何做好DDoS防御

DDoS攻击是目前最常见的网络攻击方式之一&#xff0c;各种规模的企业包括组织机构都在受其影响。对于未受保护的企业来讲&#xff0c;每次DDoS攻击的平均成本为20万美元。可见&#xff0c;我们显然需要开展更多的DDoS防御工作。除考虑如何规避已发生的攻击外&#xff0c;更重要…

【机器学习300问】72、神经网络的隐藏层数量和各层神经元节点数如何影响模型的表现?

评估深度学习的模型的性能依旧可以用偏差和方差来衡量。它们反映了模型在预测过程中与理想情况的偏离程度&#xff0c;以及模型对数据扰动的敏感性。我们简单回顾一下什么是模型的偏差和方差&#xff1f; 一、深度学习模型的偏差和方差 偏差&#xff1a;衡量模型预测结果的期望…

K8s的亲和、反亲和、污点、容忍

1 亲和与反亲和 亲和性的原理其实很简单&#xff0c;主要利用label标签结合nodeSelector选择器来实现 1.1 Pod和Node 从pod出发&#xff0c;可以分成亲和性和反亲和性&#xff0c;分别对应podAffinity和podAntiAffinity。从node出发&#xff0c;也可以分成亲和性和反亲和性&…

Hbase的shell命令(详细)

一、help 1.help 显示命名的分组情况 2.help 命令名称 查看命令的具体使用&#xff0c;包括命令的作用和用法。 举例&#xff1a;help list 二、general 组&#xff08;普通命令组&#xff09; 命令 描述 …

Codeforces Round 814 (Div. 2) D2. Burenka and Traditions (hard version)

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; // #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e9, maxm 4e4 5;…

实验室信息系统源码 saas模式java+.Net Core版开发的云LIS系统全套源码可二次开发有演示

实验室信息系统源码 saas模式java.Net Core版开发的云LIS系统全套源码可二次开发有演示 一、技术框架 技术架构&#xff1a;Asp.NET CORE 3.1 MVC SQLserver Redis等 开发语言&#xff1a;C# 6.0、JavaScript 前端框架&#xff1a;JQuery、EasyUI、Bootstrap 后端框架&am…

如何配置Postgres的自动扩展功能以应对数据增长

文章目录 解决方案1. 表空间管理2. 分区表3. 自动扩展配置4. 监控和告警5. 使用外部工具和服务 示例代码示例1&#xff1a;创建表空间示例2&#xff1a;创建分区表示例3&#xff1a;调整配置参数示例4&#xff1a;使用监控和告警工具 总结 在PostgreSQL中&#xff0c;随着数据的…

type-cDP输入转双type-cDP输出,加type-c接口充电管理同时接两台显示器或者VR投屏,龙迅LT8712SX方案,龙迅桥接芯片方案

type-c的应用在各种设备上更加广泛&#xff0c;包括手机&#xff0c;电脑&#xff0c;游戏掌机&#xff0c; 因为type-c的功能非常强大&#xff0c;可以做到PD快充&#xff0c;DP信号输出&#xff0c;USB信号输出&#xff0c;所以很多设备为了做得更简洁都开始把其他的如HDMI接…

Go诊断工具

Go 提供了一些出色的诊断工具,可帮助我们深入了解应用程序的执行情况。 1. 分析工具 分析工具可观测应用程序执行的各种指标。它使我们能够解决性能问题、检测争用、定位内存泄漏等。这些指标可以通过以下几个配置文件收集: CPU--确定应用程序将时间花在了哪里Goroutine--报…

【.Net动态Web API】背景与实现原理

&#x1f680;前言 本文是《.Net Core进阶编程课程》教程专栏的导航站&#xff08;点击链接&#xff0c;跳转到专栏主页&#xff0c;欢迎订阅&#xff0c;持续更新…&#xff09; 专栏介绍&#xff1a;通过源码实例来讲解Asp.Net Core进阶知识点&#xff0c;让大家完全掌握每一…

Text2sql的一些技巧

最近看到了一篇关于text2sql的文章&#xff0c;以及一些论文。对使用模型做text2sql给了一些不错的建议。 参考文章&#xff1a;24年大模型潜力方向&#xff1a;大浪淘沙后的Text-to-SQL和Agent - 知乎 论文&#xff1a;https://arxiv.org/pdf/2403.09732.pdf 关于模型的建议 …

Stm32-hal库串口教程

工程是在上一节的LED的基础上修改的。 串口原理图 串口配置 led参考 CubelMX点灯-CSDN博客https://blog.csdn.net/anlog/article/details/137830323生成工程 编写包含文件 编写重定向代码 编写发送 编译下载 串口没有收到数据 查找原因 少配置了下图 再编译下载 收到数据…

mac安装nvm详细教程

0. 前提 清除电脑上原有的node (没有装过的可以忽略)1、首先查看电脑上是否安装的有node,查看node版本node -v2、如果有node就彻底删除nodesudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}2、保证自己的电脑上有安装git,不然下载n…

Since Maven 3.8.1 http repositories are blocked.

编译maven 项目时候报错提示下面信息&#xff1a; Since Maven 3.8.1 http repositories are blocked.Possible solutions: - Check that Maven settings.xml does not contain http repositories - Check that Maven pom files do not contain http repository http://XXXXXX:…

Java web应用性能分析之客户端慢

客户端慢的原因包括&#xff1a; 终端设备老化&#xff08;手机、PAD、电脑年限久远、运行期间产生了很多垃圾未清除&#xff09;终端网络设备老化&#xff08;路由器、交换机老化&#xff09;跟我们使用的手机一样&#xff0c;路由器也需要及时更新换代&#xff0c;否则硬件跟…

分布式限流——Redis + Lua脚本实现令牌桶算法

主要思路概括如下&#xff1a; 定义数据结构&#xff1a; 使用Redis存储令牌桶的状态&#xff0c;包括当前令牌数&#xff08;KEYS[1]&#xff09;和上一次令牌填充的时间戳&#xff08;KEYS[1]:last&#xff09;。 计算新增令牌&#xff1a; 获取当前系统时间与上次令牌填充时…