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.rhkb.cn/news/82065.html

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

相关文章

PPG心率血氧检测健康型沙发方案

《中国心血管健康与疾病报告2021》数据显示&#xff0c;我国心血管病患病人数已达 3.3 亿。目前&#xff0c;心脑血管病 死亡占城乡居民总死亡原因的首位&#xff0c;农村为46.7%&#xff0c;城市为44%。老年人是心脑血管病的主要发病体&#xff0c;老年 人患心脑血管病的几率较…

2023牛客暑期多校训练营7-c-Beautiful Sequence

思路&#xff1a; &#xff0c;则有&#xff0c;也就是说只要知道A1就可以求任意A。由于A是升序排列&#xff0c;所以对于任意&#xff0c;二进制所包含1的最高位第k位来说&#xff0c;表明与第k位相反&#xff0c;要大一些&#xff0c;所以它的第k位为1&#xff0c;的第k位为…

问题解决和批判性思维是软件工程的重要核心

软件工程的重心在于问题解决和批判性思维&#xff08;合理设计和架构降低复杂度&#xff09;&#xff0c;而非仅局限于编程。 许多人误以为软件工程就只是编程&#xff0c;即用编程语言编写指令&#xff0c;让计算机按照这些指令行事。但实际上&#xff0c;软件工程的内涵远超…

85. 最大矩形

题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 示例 1&#xff1a; 输入&#xff1a;matrix [["1","0","1","0","0"],["1…

HBase Shell 操作

1、基本操作 1.1、进入HBase客户端命令行 前提是先启动hadoop集群和zookeeper集群。 bin/hbase shell 1.2、查看帮助命令 helphelp 查看指定命令的语法规则 查看 list_namespace 的用法&#xff08;‘记得加单引号’&#xff09; help list_namespace 2、namespace 我们…

python文件操作

文章目录 一 文件的编码认识二 python文件操作2.1 open()打开函数2.2 mode常用的访问模式2.3 open函数的文件对象2.4 文件读操作2.5 练习案例&#xff1a;单词计数 三 文件的写入四 操作综合案例4.1 需求4.2 实现思路4.3 参考代码1.04.4 参考代码2.0 一 文件的编码认识 文件编码…

分享windwosServer2012R--ISO镜像下载地址(含激活教程)

windowsServer2012R----急速网盘下载地址&#xff1a;点击下载 提取码&#xff1a;888999 激活下载&#xff1a;点击下载 提取码&#xff1a;888999

ElasticSearch 7.4学习记录(基础概念和基础操作)

若你之前从未了解过ES&#xff0c;本文将由浅入深的一步步带你理解ES&#xff0c;简单使用ES。作者本人就是此状态&#xff0c;通过学习和梳理&#xff0c;产出本文&#xff0c;已对ES有个全面的了解和想法&#xff0c;不仅将知识点梳理&#xff0c;也涉及到自己的理解&#xf…

Java事件监听机制

这里写目录标题 先进行专栏介绍再插一句 开始喽事件监听机制分析观察者模式观察者模式由以下几个角色组成&#xff1a;观察者模式的工作流程如下&#xff1a;观察者模式的优点包括&#xff1a;观察者模式适用于以下场景&#xff1a;总结 事件监听机制的工作流程如下&#xff1a…

喆啡酒店十周年丨啡越时间限,ALL BY 10VE!

啡越时光热爱为伴 十年前&#xff0c;秉持对咖啡馆文化及复古风格的喜爱&#xff0c;喆啡酒店创造全新的Coffetel品类&#xff0c;将充满「温暖」「愉悦」「咖啡香」的格调体验带给消费者&#xff0c;成为无数人「旅途中的啡凡存在」。 十年间&#xff0c;喆啡酒店以热爱化为…

【深度学习】SMILEtrack: SiMIlarity LEarning for Multiple Object Tracking,论文

论文&#xff1a;https://arxiv.org/abs/2211.08824 代码&#xff1a;https://github.com/WWangYuHsiang/SMILEtrack 文章目录 AbstractIntroductionRelated WorkTracking-by-DetectionDetection methodData association method Tracking-by-Attention Methodology架构概述外观…

【vue3】基础知识点-setup语法糖

学习vue3&#xff0c;都会从基础知识点学起。了解setup函数&#xff0c;ref&#xff0c;recative&#xff0c;watch、comptued、pinia等如何使用 今天说vue3组合式api&#xff0c;setup函数 在学习过程中一开始接触到的是这样的&#xff0c;定义数据且都要通过return返回 <…

[保研/考研机试] KY102 计算表达式 上海交通大学复试上机题 C++实现

描述 对于一个不存在括号的表达式进行计算 输入描述&#xff1a; 存在多组数据&#xff0c;每组数据一行&#xff0c;表达式不存在空格 输出描述&#xff1a; 输出结果 示例1 输入&#xff1a; 6/233*4输出&#xff1a; 18思路&#xff1a; ①设立运算符和运算数两个…

Windows环境下通过 系统定时 执行脚本方式 压缩并备份文件夹 到其他数据盘

环境配置 压缩时需要使用7-zip进行调用&#xff0c;因此根据自己电脑进行安装 官网&#xff1a;https://www.7-zip.org/ 脚本文件 新建记事本文件&#xff0c;重命名为git_back_up.bat echo off rem 设置utf-8可以正常显示中文 chcp 65001 > nulrem 获取当前日期和时间&…

使用动态规划实现错排问题-2023年全国青少年信息素养大赛Python复赛真题精选

[导读]&#xff1a;超平老师计划推出《全国青少年信息素养大赛Python编程真题解析》50讲&#xff0c;这是超平老师解读Python编程挑战赛真题系列的第15讲。 全国青少年信息素养大赛&#xff08;原全国青少年电子信息智能创新大赛&#xff09;是“世界机器人大会青少年机器人设…

大数据Flink(五十七):Yarn集群环境(生产推荐)

文章目录 Yarn集群环境(生产推荐) 一、准备工作

Clickhouse 存储引擎

一、常用存储引擎分类 1.1 ReplacingMergeTree 这个引擎是在 MergeTree 的基础上&#xff0c;添加了”处理重复数据”的功能&#xff0c;该引擎和MergeTree的不同之处在于它会删除具有相同主键的重复项。 特点: 1使用ORDERBY排序键作为判断重复的唯一键 2.数据的去重只会在合并…

Openlayers实战:使几何图形适配窗口

Openlayers开发的项目中,有一种应用非常重要,就是绘制或者显示出几何图形后,让几何图形居中并适配到窗口下,这样能让用户很好的聚焦到所要看的内容中去。 这里使用了fit的这个view 的方法,具体的操作请参考示例源代码。 效果图 源代码 /* * @Author: 大剑师兰特(xiaozh…

apple pencil二代值不值得买?好用的苹果平替笔推荐

自从苹果的Pencil系列问世以来&#xff0c;在国内电容笔市场的销量大增&#xff0c;而苹果的Pencil系列&#xff0c;其的售价更是贵的让人望而却步。现在市面上有很多平替的电容笔&#xff0c;都能取代苹果的Pencil&#xff0c;用来做笔记、做批注、写写字都绰绰有余了。在这里…

【状态估计】一维粒子滤波研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…