Element的el-select下拉框多选添加全选功能

news2024/11/19 19:24:42

先看效果图

全选:
在这里插入图片描述
没有选中时:
在这里插入图片描述
选中部分:
在这里插入图片描述

作者项目使用的是vue3写法,如果是vue2的自己转换一下

html代码:
在这里插入图片描述

js代码:
在这里插入图片描述

拓展
另一种方法,如果不想使用勾选框,可以试试下面的方法

在这里插入图片描述

在这里插入图片描述

还是推荐第一种写法,比较简单,如果使用这种的可以参考一下,思路是这样的

const selectAll = () => {
  form.fileTypes = []
  if (form.fileTypes.length < fileTypeList.length) {
    fileTypeList.map((item) => {
      form.fileTypes.push(item.name)
    })
    form.fileTypes.unshift('全选')
  } else {
    form.fileTypes = []
  }
}

const changeSelect = (val) => {
  if (!val.includes('全选') && val.length === fileTypeList.length) {
    form.fileTypes.unshift('全选')
  } else if (val.includes('全选') && (val.length - 1) < fileTypeList.length) {
    form.fileTypes = form.fileTypes.filter((item) => {
      return item !== '全选'
    })
  }
}

const removeTag = (val) => {
  if (val === '全选') {
    form.fileTypes = []
  }
}

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

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

相关文章

Bigemap 在林业调研工作中的应用

1. 工作内容&#xff1a;做人工造林计划&#xff0c;生态林业规划设计。 2. 使用场景&#xff1a;主要用 bigemap 软件下载地图 &#xff0c;套合自己用 app 实地采集的数据&#xff0c;比如&#xff1a;林地占 用案件调查&#xff1b;扶贫工作&#xff1b;森林防火灾害面积…

【iOS RunLoop】

文章目录 前言-什么是RunLoop&#xff1f;默认情况下主线程的RunLoop原理 1. RunLoop对象RunLoop对象的获取 CFRunLoopRef源码部分&#xff08;引入线程相关&#xff09; 2. RunLoop和线程3. RunLoop相关的类RunLoop相关类的实现CFRunLoopModeRef五种运行模式CommonModes CFRun…

【力扣】206. 反转链表 <链表指针>

【力扣】206. 反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例 2 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1] 示例 3 输入&#xff1a…

超详细|ChatGPT辅助论文编写教程

本教程讲述在论文编写中使用ChatGPT进行辅助&#xff0c;提供思路&#xff0c;提升效率 祝看到本教程的小伙伴们都完成论文&#xff0c;顺利毕业。 可以加QQ群交流&#xff0c;一群&#xff1a; 123589938 第一章 论文框架搭建 1.1 明确论文题目 1.1.1 适合的研究方向 首先赋…

产品使用手册编写指南工具,我推荐这几个!

在编写产品使用手册时&#xff0c;有许多工具可以帮助我们更高效地完成任务。因为产品手册不仅是一份使用说明书&#xff0c;更是互联网企业宣传和推销自己产品的一种普遍形式&#xff0c;是对产品外观及内容的客观介绍&#xff0c;是对业务操作流程的详细讲解&#xff0c;是对…

【Apollo学习笔记】—— 相机仿真

文章目录 前言相关代码整理 测试实践文件目录包管理BUILD文件以及cyberfile.xml文件源程序BUILD运行结果其他参考CameraOutput channels启动camera驱动启动camera video compression驱动 前言 本文是对Cyber RT的学习记录,文章可能存在不严谨、不完善、有缺漏的部分&#xff0…

uniapp 使用iconfont

问题描述&#xff1a;在开发过程中会遇到使用自定义icon的情况&#xff0c;在uniapp项目中使用iconfont步骤如下。 问题解决 步骤一&#xff1a; 打开iconfont网址------我的项目-----下载至本地 下载成功的文件内容&#xff1a; 步骤二&#xff1a; 以管理员身份运行终端&am…

c++游戏制作指南(二):制作一个炫酷的启动界面(c++绘图)

&#x1f37f;*★,*:.☆(&#xffe3;▽&#xffe3;)/$:*.★* &#x1f37f; &#x1f35f;欢迎来到静渊隐者的csdn博文&#xff0c;本文是c游戏制作指南的一部&#x1f35f; &#x1f355;更多文章请点击下方链接&#x1f355; &#x1f368; c游戏制作指南&#x1f3…

SAP 集成以及PO异步接口调优

前言&#xff1a;目前国内的SAP相关的技术文档实在是少得可怜&#xff0c;PO相关的就更少了&#xff0c;基本上都是需要摸索&#xff0c;官方的技术专家很多时候的回复都是说了又似乎没说。。。 背景&#xff1a;由于目标系统接收数据缓慢或者是异步线程出现异常导致错误积压。…

IO流(3)- 转换流与打印流

目录 1. 为什么要用到转换流&#xff1f; 2. 字符输入转换流&#xff08;重点掌握&#xff09; 3. 字符转换输出流&#xff08;理解即可&#xff09; 4. 认识打印流 5. 打印流的作用 6. PrintStream(字节打印流)如何使用&#xff1f; 7. PrintStream 内部没有缓冲区 8. …

Go -- 测试 and 项目实战

没有后端基础&#xff0c;学起来真是费劲&#xff0c;所以打算速刷一下&#xff0c;代码跟着敲一遍&#xff0c;有个印象&#xff0c;大项目肯定也做不了了&#xff0c;先把该学的学了&#xff0c;有空就跟点单体项目&#xff0c;还有该看的书.... 目录 &#x1f34c;单元测试…

【LeetCode】【数据结构】单链表OJ常见题型(二)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言&#xff1a; 【LeetCode】面试题02.04. 分割链表 【Lee…

Unity实现物体上下漂浮旋转效果

效果展示 代码&#xff08;直接挂载在物体上就可以了&#xff09; using System.Collections; using System.Collections.Generic; using UnityEngine;public class FloatingObject : MonoBehaviour {public float amplitude 0.5f; // 上下移动的幅度public float frequency …

C# OpenCvSharp 去水印 图像修复

效果 项目 VS2010.net4.0OpenCvSharp3 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.IO; using System…

简单了解一下vue-router是什么

要学习vue-router就要先知道这里的路由是什么&#xff1f;为什么我们不能像原来一样直接用<a></a>标签编写链接哪&#xff1f;vue-router如何使用&#xff1f;常见路由操作有哪些&#xff1f;等等这些问题&#xff0c;就是本篇要探讨的主要问题。 vue-router是什么…

【二叉树进阶】二叉树的前中后序遍历(非递归迭代实现)

文章目录 1. 二叉树的前序遍历1.1 思路分析1.2 AC代码 2. 二叉树的中序遍历2.1 思路分析2.2 AC代码 3. 二叉树的后序遍历3.1 思路13.2 思路1AC3.3 思路23.4 思路2AC 1. 二叉树的前序遍历 题目链接: link 不用递归&#xff0c;用迭代算法如何实现对二叉树的前序遍历&#xff1f…

linux作业

1.简述静态网页和动态网页的区别 (1).程序是否在服务器端运行&#xff0c;是重要标志。 (2).编程技术不同。静态网页和动态网页主要根据网页制作的语言来区分。 (3).被搜索引擎收录情况不同。 (4).用户访问速度不同。 (5).制作和后期维护工作量不同。 2. 简述 Webl.0 和 …

嵌入式pc技术的特点有哪些?

嵌入式PC技术是将计算机硬件和软件嵌入到各种设备中的一种技术&#xff0c;它具有低功耗、高效率、小型化、易于集成等优点&#xff0c;广泛应用于工业自动化、医疗设备、电力、通信、家用电器、物联网等领域&#xff0c;成为新时代工业生产和社会生活必不可少的技术之一。 嵌入…

Python基本数据类型之散列类型详解

前言&#xff1a; python的基本数据类型可以分为三类&#xff1a;数值类型、序列类型、散列类型&#xff0c;本文主要介绍散列类型。 一、散列类型 散列类型&#xff1a;内部元素无序&#xff0c;不能通过下标取值 1&#xff09;字典&#xff08;dict&#xff09;&#xff…

SAP 特殊采购类型52简介

特殊采购类型52简介-52 直接生产/收集订单可以在物料主数据中进行设置或者在BOM中进行设置, 所谓“直接生产”,是相对于一般的“间接生产”模式而言的。在我们通常采用的计划模式下面,所有在BOM结构里面的半成品,都是在库存中作为一个整体, 可以用在任意的一个成品物料,或…