当前位置: 首页 > 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 = []}
}

相关文章:

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

先看效果图 全选&#xff1a; 没有选中时&#xff1a; 选中部分&#xff1a; 作者项目使用的是vue3写法&#xff0c;如果是vue2的自己转换一下 html代码&#xff1a; js代码&#xff1a; 拓展 另一种方法&#xff0c;如果不想使用勾选框&#xff0c;可以试试下面的方…...

python调用pytorch的clip模型时报错

使用python调用pytorch中的clip模型时报错&#xff1a;AttributeError: partially initialized module ‘clip’ has no attribute ‘load’ (most likely due to a circular import) 目录 现象解决方案一、查看项目中是否有为clip名的文件二、查看clip是否安装成功 现象 clip…...

MySQL 数据库 binLog 日志的使用

一、概念与作用 binlog&#xff08;二进制日志&#xff09;是MySQL数据库中的一种日志类型。它记录了数据库中的所有更改操作&#xff0c;例如插入、更新、删除操作。binlog以二进制形式存储&#xff0c;因此可以更高效地进行读取和解析。 binlog通常用于以下几个方面&#x…...

Apache Storm入门介绍之三分钟看懂Apache Storm

文章目录 0.前言1. 什么是 Apache Storm&#xff1f;1.1. Nimbus1.2. Zookeeper1.3. Supervisor1.4. Worker1.5 集群模式下各组件职责 2. 核心概念2.1基本架构和任务模型2.2 工作流程 3. 源码地址3.1. 代码结构3.1. 核心模块介绍 4. Storm入门实例0.创建java工程并引入依赖1. 创…...

RF手机天线仿真介绍(三):调谐开关分析

目录 简介调谐开关RON、COFF的影响分析不同位置的调谐器件coff影响分析不同位置的调谐器件Ron影响分析Coff引起谐振的解决示例 调谐开关VPEAK分析调谐开关Vpeak示例 简介 孔径调谐能调节天线的电长度&#xff0c;可将其谐振点切换到所需支持的工作频段。天线孔径调谐器通过改变…...

Ubuntu20.04 + QT5.14.2 + VTK8.2.0 + PCL 1.10 环境配置

目录 Ubuntu20.04 QT5.14.2 VTK8.2.0 PCL 1.10 环境配置一、VTK 编译和安装1、库依赖&#xff1a;2、下载资源&#xff1a;[下载VTK8.2.0](https://www.vtk.org/files/release/8.2/VTK-8.2.0.tar.gz)3、编译&#xff1a;4、安装5、qtcreator 配置编译的libQVTKWidgetPlugin.…...

GPT Prompt编写的艺术:如何提高AI模型的表现力

随着AI技术的迅速发展&#xff0c;人工智能模型变得越来越强大&#xff0c;能够协助我们完成各种任务。然而&#xff0c;如何更好地利用AI的能力仍然存在很大的探索空间。在与AI进行交互的过程中&#xff0c;我们主要依赖于Prompt&#xff0c;不管是直接与大模型交互&#xff0…...

Ubuntu18.04 安装opencv 4.8.0教程(亲测可用)

1. 安装准备 安装前需要下载一些必须的依赖项。 不同版本opencv依赖会有不同&#xff0c;具体见官网opencv安装 sudo apt-get install build-essential sudo apt-get install cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev sudo apt-…...

【腾讯云Cloud Studio实战训练营】React 快速构建点餐页面

前言&#xff1a; Cloud Studio是一个在线的云集成开发环境&#xff08;IDE&#xff09;&#xff0c;可以让开发人员在浏览器中轻松地开发、测试、调试和部署应用程序。它提供了基于云的计算资源和工具&#xff0c;例如代码编辑器、编译器、调试器、版本控制系统和项目管理工具…...

自监督去噪:Noise2Self原理分析及实现 (Pytorch)

文章地址:https://arxiv.org/abs/1901.11365 代码地址: https://github.com/czbiohub-sf/noise2self 要点   Noise2Self方法不需要信号先验信息、噪声估计信息和干净的训练数据。唯一的假设就是噪声在测量的不同维度上表现出的统计独立性&#xff0c;而真实信号表现出一定的…...

docker容器学习笔记1

docker容器是干什么用的 docker就是一个轻量级的虚拟机&#xff0c;是一个容器&#xff0c;隔离性好&#xff0c;能够确保环境的统一&#xff0c;有效利用系统资源&#xff0c;轻松迁移和拓展。简单的可以理解为容器就是一个小型功能齐全的虚拟机。 实际上是如何使用的呢&…...

线程魔法:用Spring Boot的@Async注解开启异步世界

在现代的应用程序开发中&#xff0c;异步调用已成为提高性能和响应性的重要策略之一。通过使用Spring Boot框架&#xff0c;我们可以轻松地实现异步调用&#xff0c;从而在处理请求时能够同时执行耗时的操作&#xff0c;如发送电子邮件、处理文件等&#xff0c;而不会阻塞主线程…...

面试热题(接雨水问题)

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 我们看到题的第一步&#xff0c;永远是对入参进行判断 public int trap(int[] height) {if (height null) {return 0;}...} 但是我们想想看&#xff0c;接…...

Meta AI研究团队新AI模型: Llama 2 大语言模型

Llama是Facebook Research团队开发的基础语言模型集&#xff0c;旨在提供广泛的语言理解能力。它基于转换器架构&#xff0c;参数范围从7B到65B。通过使用Llama模型&#xff0c;研究人员和开发人员可以构建更先进的自然语言处理系统。您可以在GitHub上找到相关的代码和资源&…...

CSS水平垂直居中

1.利用定位 margin:auto 2.flex布局 3.grid布局 一、利用positionmargin:auto <style>.outer {position: relative; /*父亲相对定位*/width: 200px;height: 200px;background-color: red;}.inner {position: absolute; /*儿子绝对定位*/top: 0;bottom: 0;left: 0;ri…...

Yolov8-pose关键点检测:模型部署篇 | yolov8-pose.onnx python推理

💡💡💡本文解决什么问题:Yolov8-pose关键点训练得到的模型转换成onnx格式在python下完成推理 Yolov8-Pose关键点检测专栏介绍:https://blog.csdn.net/m0_63774211/category_12398833.html ✨✨✨手把手教你从数据标记到生成适合Yolov8-pose的yolo数据集; 🚀🚀�…...

Linux中提示No such file or directory解决方法

说明&#xff1a; 在linux下&#xff0c;./xxx.sh执行shell脚本时会提示No such file or directory。但shell明明存在&#xff0c;为什么就是会提示这个呢&#xff1f; 这种其实是因为编码方式不对&#xff0c;如你在win下编辑sh&#xff0c;然后直接复制到linux下面 实现&…...

Sklearn-使用SVC对iris数据集进行分类

Sklearn-使用SVC对iris数据集进行分类 iris数据集的加载训练svc模型输出混淆矩阵和分类报告使用Pipeline管道完成固定操作不使用Pipeline使用Pipeline 使用SVC对iris数据集进行分类预测 涉及内容包含&#xff1a; 数据集的加载,训练集和测试集的划分训练svc模型,对测试集的预测…...

项目经理必读:领导风格对项目成功的关键影响

引言 项目经理作为一个领导者的角色&#xff0c;他们需要协调各方资源&#xff0c;管理团队&#xff0c;推动项目的进行。为了完成这些任务&#xff0c;项目经理必须具备各种领导风格的灵活性&#xff0c;以应对项目中的各种变数和挑战。在这篇文章中&#xff0c;我们将讨论领…...

行业追踪,2023-08-04

自动复盘 2023-08-04 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

Alibaba DASD-4B Thinking 对话工具Java集成实战:SpringBoot微服务调用指南

Alibaba DASD-4B Thinking 对话工具Java集成实战&#xff1a;SpringBoot微服务调用指南 最近在做一个企业内部的智能助手项目&#xff0c;后端系统需要接入一个靠谱的对话模型来处理客服咨询和员工问答。选型时&#xff0c;Alibaba DASD-4B Thinking 对话工具进入了我们的视野…...

MAXIM美信 MAX1673ESA+T SOP8 电荷泵

特性MAX1673电荷泵反相器提供了一种低成本、紧凑的方式&#xff0c;可从正输入产生稳压负输出&#xff0c;输出电流高达125mA。仅需三个小电容&#xff0c;且只需两个电阻即可设置其输出电压。输入范围为2V至5.5V。在跳周期&#xff08;Skip&#xff09;稳压模式下&#xff0c;…...

AI Agent设计核心:用Phi-4-mini-reasoning构建具备推理能力的智能体

AI Agent设计核心&#xff1a;用Phi-4-mini-reasoning构建具备推理能力的智能体 1. 智能体技术的新机遇 最近接触了几个做自动化流程的团队&#xff0c;发现他们都在尝试用大模型构建更智能的Agent系统。有个做电商的朋友告诉我&#xff0c;他们现在每天要处理上千条用户咨询…...

B站缓存视频转换终极指南:m4s转MP4的快速免费解决方案

B站缓存视频转换终极指南&#xff1a;m4s转MP4的快速免费解决方案 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾经遇到过这样的困扰&a…...

GME-Qwen2-VL-2B-Instruct入门STM32开发:识别原理图并生成初始化代码注释

GME-Qwen2-VL-2B-Instruct入门STM32开发&#xff1a;识别原理图并生成初始化代码注释 1. 引言 刚开始学STM32的时候&#xff0c;你是不是也对着密密麻麻的原理图发过愁&#xff1f;那些弯弯曲曲的线&#xff0c;各种奇怪的符号&#xff0c;还有一堆英文缩写&#xff0c;看着就让…...

Sambert语音合成镜像实战:快速搭建智能客服语音播报系统

Sambert语音合成镜像实战&#xff1a;快速搭建智能客服语音播报系统 1. 业务场景与需求分析 在智能客服系统中&#xff0c;语音播报功能直接影响用户体验。传统解决方案通常面临三个核心痛点&#xff1a; 音质机械感强&#xff1a;拼接式语音合成缺乏自然流畅度情感表达单一…...

Nanbeige像素冒险聊天终端开箱体验:零代码,打造专属复古游戏AI聊天室

Nanbeige像素冒险聊天终端开箱体验&#xff1a;零代码&#xff0c;打造专属复古游戏AI聊天室 1. 引言&#xff1a;当AI对话遇上复古像素风 还记得小时候玩过的那些经典JRPG游戏吗&#xff1f;那些色彩鲜艳的像素世界&#xff0c;充满神秘感的对话框&#xff0c;以及让人沉浸其…...

阅读《人月神话》与《代码大全》在2024年的新感悟

重读经典&#xff1a;2024年技术书籍的新启示 在AI重构软件开发的2024年&#xff0c;重读《人月神话》与《代码大全》这两本软件工程经典&#xff0c;竟有了超越时代的共鸣。布鲁克斯关于"没有银弹"的论断与麦康奈尔对代码质量的执着&#xff0c;在低代码平台和生成…...

【GD32开发】深入解析GD32F103 TIMER0 PWM死区时间配置与优化

1. PWM死区时间基础概念与GD32特性 PWM死区时间是电机控制和电源转换系统中的关键参数。简单来说&#xff0c;它就是在互补PWM信号切换时插入的一个短暂延迟&#xff0c;防止上下桥臂同时导通造成短路。想象一下十字路口的红绿灯切换时&#xff0c;会设置几秒的全红灯时间避免车…...

【51单片机】【Proteus仿真】 十字路口交通灯系统:从仿真到代码的实战解析

1. 项目背景与核心功能 十字路口交通灯系统是嵌入式开发的经典练手项目&#xff0c;它完美融合了硬件控制、定时器中断和状态机设计三大核心技能。我当年第一次用51单片机做这个项目时&#xff0c;整整调了两天黄灯闪烁频率才稳定下来。这个仿真系统最实用的地方在于&#xff0…...