当前位置: 首页 > news >正文

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.lryc.cn/news/108720.html

相关文章:

  • python调用pytorch的clip模型时报错
  • MySQL 数据库 binLog 日志的使用
  • Apache Storm入门介绍之三分钟看懂Apache Storm
  • RF手机天线仿真介绍(三):调谐开关分析
  • Ubuntu20.04 + QT5.14.2 + VTK8.2.0 + PCL 1.10 环境配置
  • GPT Prompt编写的艺术:如何提高AI模型的表现力
  • Ubuntu18.04 安装opencv 4.8.0教程(亲测可用)
  • 【腾讯云Cloud Studio实战训练营】React 快速构建点餐页面
  • 自监督去噪:Noise2Self原理分析及实现 (Pytorch)
  • docker容器学习笔记1
  • 线程魔法:用Spring Boot的@Async注解开启异步世界
  • 面试热题(接雨水问题)
  • Meta AI研究团队新AI模型: Llama 2 大语言模型
  • CSS水平垂直居中
  • Yolov8-pose关键点检测:模型部署篇 | yolov8-pose.onnx python推理
  • Linux中提示No such file or directory解决方法
  • Sklearn-使用SVC对iris数据集进行分类
  • 项目经理必读:领导风格对项目成功的关键影响
  • 行业追踪,2023-08-04
  • 双链表(带哨兵位头节点)
  • MySQL - LOAD DATA LOCAL INFILE将数据导入表中和 INTO OUTFILE (速度快)
  • String ,StringBulider ,StringBuffer
  • 阶段总结(linux基础)
  • HTTP(超文本传输协议)学习
  • 23年7月工作笔记整理(前端)
  • pytorch学习——正则化技术——权重衰减
  • iTOP-RK3588开发板Ubuntu 系统交叉编译 Qt 工程-命令行交叉编译
  • Java进阶——数据结构与算法之哈希表与树的入门小结(四)
  • DataFrame中按某字段分类并且取该分类随机数量的数据
  • 【c++】rand()随机函数的应用(一)——rand()函数详解和实例