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

先看效果图

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

作者项目使用的是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.mzph.cn/news/24311.shtml

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

相关文章

Spring Boot介绍--快速入门--约定优于配置

文章目录 SpringBoot 基本介绍官方文档Spring Boot 是什么?SpringBoot 快速入门需求/图解说明完成步骤快速入门小结 Spring SpringMVC SpringBoot 的关系总结梳理关系如何理解-约定优于配置 SpringBoot 基本介绍 官方文档 官网: https://spring.io/projects/spring-boot 学习…

linux 复习

vim 使用 一般模式 、 命令模式、编辑模式 esc 进入一般模式 i 进入编辑模式 shift: 进入命令模式 yy p 复制粘贴 5yy 复制当前开始的5行 dd 删除 5dd 删除当前开始的5行 u撤销操作 ctrlr 恢复 shiftg 滚动最底部 gg 滚动最顶 输入数字 然后shiftg 跳转到指定行 用户操作…

GitLab不同角色对应的权限

Owner&#xff08;拥有者&#xff09;&#xff1a; 拥有者是项目或组的创建者&#xff0c;拥有最高级别的权限。他们可以添加、删除项目成员&#xff0c;修改项目设置&#xff0c;管理访问权限&#xff0c;并进行项目转让。在组级别&#xff0c;他们还可以添加或删除子组和项目…

java策略模式三种实现方案

方案1&#xff1a;Autowired Map public interface ClientService {void hanlde(Object obj);String type(); }Service public class PcClientService implements ClientService { Overridepublic void handle(Object obj) {// todo pc客户端逻辑} Overridepublic Stri…

Leaflet入门,地图平移跳转到指定位置和飞行到指定位置效果

前言 本章讲解如何Leaflet如何实现操作地图平移到指定位置或者飞行到指定位置效果。 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定式的使用Leaflet地图,以及初始化后拿到leaflet对象,方便调用leaflet的api》 vue3如何使用:《L…

XXL-JOB定时任务框架(Oracle定制版)

特点 xxl-job是一个轻量级、易扩展的分布式任务调度平台&#xff0c;能够快速开发和简单学习。开放源代码并被多家公司线上产品使用&#xff0c;开箱即用。尽管其确实非常好用&#xff0c;但我在工作中使用的是Oracle数据库&#xff0c;因为xxl-job是针对MySQL设计的&#xff…

MySql的Windows安装指南

目录 一、MySQL的4大版本 二、软件的下载 三、MySQL8.0 版本的安装 四、配置MySQL8.0 五、配置MySQL8.0 环境变量 六、登录验证 一、MySQL的4大版本 MySQL Community Server 社区版本&#xff0c;开源免费&#xff0c;自由下载&#xff0c;但不提供官方技术支持&#xff…

一款界面精美的商城微信小程序源码 蔬菜生鲜商城小程序源码

一款界面精美的商城微信小程序源码 蔬菜生鲜商城小程序源码 界面非常漂亮的一款我厨蔬菜生鲜商城小程序源码&#xff0c;tab切换效果&#xff0c;分享给大家参考。

一、7.协同式任务切换与抢占式任务切换

使用TSS来在任务切换时保护现场和恢复现场 内核任务&#xff1a;单纯由内核组成的任务&#xff0c;和其他用户程序组成其他任务 内核任务的创建 ;为内核任务创建任务控制块TCB mov ecx, 0x46 call sys_routine_seg_sel:allocate_memory call append_to_tcb_link ;将此TCB添加…

BClinux8.6 制作openssh9.2p2 rpm升级包和升级实战

一、背景说明 BClinux8.6 安装的openssh 版本为9.3p1&#xff0c;经绿盟扫描&#xff0c;存在高危漏洞&#xff0c;需要升级到最新。 OpenSSH 命令注入漏洞(CVE-2020-15778) OpenSSH 安全漏洞(CVE-2023-38408) 目前官网只提供编译安装包&#xff0c;而BClinux8.6 为rpm方…

软考高项-项目立项管理

立项管理的内容包含哪些&#xff1f; 提交项目建议书项目可行性研究项目的招标和投标 立项流程分为两块 对于甲方的立项&#xff1a;需求调研->编写项目申请书->可行性研究&#xff08;机会、初步、详细&#xff09;->项目论证->项目评估->评审获得批准->发…

rust之String、str、‘static str 与 FastStr使用详解

关注我&#xff0c;学习Rust不迷路&#xff01;&#xff01; String: 创建一个空的 String &#xff1a; let empty_string String::new();从字符串字面量创建一个 String &#xff1a; let hello_string String::from("Hello");将一个字符串追加到现有的 Stri…

回归预测 | MATLAB实现基于SVM-RFE-BP支持向量机递归特征消除特征选择算法结合BP神经网络的多输入单输出回归预测

回归预测 | MATLAB实现基于SVM-RFE-BP支持向量机递归特征消除特征选择算法结合BP神经网络的多输入单输出回归预测 目录 回归预测 | MATLAB实现基于SVM-RFE-BP支持向量机递归特征消除特征选择算法结合BP神经网络的多输入单输出回归预测预测效果基本介绍研究内容程序设计参考资料…

力扣:53. 最大子数组和(Python3)

题目&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff…

Vue中,$forceUpdate()的使用

在Vue官方文档中指出&#xff0c;$forceUpdate具有强制刷新的作用。 那在vue框架中&#xff0c;如果data中有一个变量:age&#xff0c;修改他&#xff0c;页面会自动更新。 但如果data中的变量为数组或对象&#xff0c;我们直接去给某个对象或数组添加属性&#xff0c;页面是识…

antv/l7地图,鼠标滚动,页面正常滑动-- 我们忽略的deltaY

背景 在官网项目中&#xff0c;需要使用一个地图&#xff0c;展示产品的分布区域及数量。希望的交互是&#xff0c;鼠标放上标点&#xff0c;tooltip展示地点和数量等信息。鼠标滚动&#xff0c;则页面随着滚动。但是鼠标事件是被地图代理了的&#xff0c;鼠标滚动意味着地图的…

性能测试入门知识总结

目录 1.什么是性能测试&#xff1f; 2.为什么要进行性能测试&#xff1f; 3.性能测试的常见术语 4.性能测试的分类 5.性能测试如何展开&#xff1f; 1.什么是性能测试&#xff1f; 性能测试是一种测试类型&#xff0c;旨在确定系统的性能以衡量性能&#xff0c;验证或验证…

8.15锁的优化

1.锁升级(锁膨胀) 无锁 -> 偏向锁 -> 轻量级锁 -> 重量级锁 偏向锁:不是真的加锁,而是做了一个标记,如果有别的线程来竞争才会真的加锁,如果没有别的线程竞争就不会加锁. 轻量级锁:一个线程占领锁资源后,另一个线程通过自旋的方式反复确认锁是否被是否(这个过程比较…

PostgreSQL表分区详解

表分区是一种非常有效的技术&#xff0c;用于提高大型数据库表的性能。通过将表的内容划分为较小的子表&#xff08;称为分区&#xff09;&#xff0c;可以减小表的整体大小&#xff0c;从而显着提高性能。 什么时候应该对表进行分区&#xff1f; 如果您的表对于服务器的 RAM…

RabbitMQ安装说明文档-v2.0

rabbitmq安装 说明&#xff1a;请使用资料里提供的CentOS-7-x86_64-DVD-1810.iso 安装虚拟机. 1. 安装依赖环境 在线安装依赖环境&#xff1a; yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c kernel-devel m4 ncurses-devel …