vue使用el-select下拉框自定义复选框
在 Vue 开发中,高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。
一、代码功能概述
这段代码创建了一个可多选的下拉框组件,通过el-select和el-checkbox-group结合的方式,实现了多个选项的选择功能。用户可以从给定的选项中选择一个或多个,并且可以通过selectChange方法实时更新已选择的值。
二、代码结构解析
- 模板部分
<template><el-selectv-model="selectData"multipleclass="select-popover-class"@change="selectChange"><el-checkbox-group :model-value="selectData"><el-optionv-for="item in options":key="item.value":value="item.value":label="item.label"><el-checkbox :label="item.label" :value="item.value" /></el-option></el-checkbox-group></el-select>
</template>
在模板中,使用了el-select组件并设置了v-model为selectData,表示选中的值。设置multiple属性允许用户进行多选。同时,通过@change事件绑定了selectChange方法,以便在选择发生变化时进行处理。内部使用el-checkbox-group和el-option结合的方式,遍历options数组生成每个选项,每个选项又包含一个el-checkbox。
2. 脚本部分
<script setup>
import { ref, computed } from 'vue'const selectData = ref([1, 2])
const options = ref([{ label: '选项1', value: 1 },{ label: '选项2', value: 2 },{ label: '选项3', value: 3 }
])
const flag = ref(true)const selectChange = value => {selectData.value = value
}
</script>
selectData是一个响应式变量,初始值为[1, 2],表示默认选中的选项。options是一个包含选项对象的数组,每个对象有label和value属性,分别用于显示的文本和实际的值。flag是另一个响应式变量,其具体用途在这段代码中不太明确。selectChange方法用于更新selectData的值。
运行效果:

相关文章:
vue使用el-select下拉框自定义复选框
在 Vue 开发中,高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。 一、代码功能概述 这段代码创建了一个可多选的下拉框组件,通过el-select和el-checkbox-group结合的方…...
k8s基础(2)—Kubernetes-Namespace
一、Namespace概述 名字空间 在 Kubernetes 中,名字空间(Namespace) 提供一种机制,将同一集群中的资源划分为相互隔离的组。 同一名字空间内的资源名称要唯一,但跨名字空间时没有这个要求。 名字空间作用域仅针对带有…...
APM for Large Language Models
APM for Large Language Models 随着大语言模型(LLMs)在生产环境中的广泛应用,确保其可靠性和可观察性变得至关重要。应用性能监控(APM)在这一过程中发挥了关键作用,帮助开发者和运维人员深入了解LLM系统的…...
Spark Runtime Filter
Runtime Filter 参考链接: https://docs.google.com/document/d/16IEuyLeQlubQkH8YuVuXWKo2-grVIoDJqQpHZrE7q04/edit?tabt.0https://www.modb.pro/db/557718https://issues.apache.org/jira/browse/SPARK-32268https://github.com/apache/spark/pull/35789https…...
AI大模型系列之七:Transformer架构讲解
目录 Transformer网络是什么? 输入模块结构: 编码器模块结构: 解码器模块: 输出模块结构: Transformer 具体是如何工作的? Transformer核心思想是什么? Transformer的代码架构 自注意力机制是什么…...
基于51单片机(STC12C5A60S2)和8X8彩色点阵屏(WS2812B驱动)的小游戏《贪吃蛇》(普中开发板矩阵按键控制)
目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、定时器02、矩阵按键3、8X8彩色点阵屏 四、主函数总结 系列文章目录 前言 《贪吃蛇》,一款经典的、怀旧的小游戏,单片机入门必写程序。 以《贪吃蛇》为载体,熟悉各种屏幕的使…...
遇到复杂的 递归查询sql 需要oracle 转pgsql 可以把数据表结构给ai
遇到复杂的 递归查询sql 需要oracle 转pgsql 可以把数据表结构给ai 并且 建立备份表 把需要的很少的数据放到表里面 这样 ai 可以很好的判断sql 咋写 还可以,让ai解释oracle sql 然后拿到描述和表和字段,给ai让他生成pgsql 的sql,亲测有效...
Zynq PS端外设之GPIO
1. GPIO(通用输入/输出) GPIO外设有4个Bank,Bank0/1通过MIO连接到PS的引脚上;Bank2/3通过EMIO连接到PL的引脚上。 注意:Bank1的电平要改成LVCOMS 1.8 GPIO寄存器 寄存器: DATA_RO: 读取GPIO的输…...
Spring Boot项目开发常见问题及解决方案(上)
启动相关问题 问题 1:项目启动时报错“找不到主类” 在使用 Spring Boot 打包成可执行 JAR 文件后启动,有时会遇到这个头疼的问题。通常是因为打包配置有误或者项目结构不符合要求。 解决方案: 首先,检查 pom.xml(Ma…...
Elasticsearch: 高级搜索
这里写目录标题 一、match_all匹配所有文档1、介绍: 二、精确匹配1、term单字段精确匹配查询2、terms多字段精确匹配3、range范围查询4、exists是否存在查询5、ids根据一组id查询6、prefix前缀匹配7、wildcard通配符匹配8、fuzzy支持编辑距离的模糊查询9、regexp正则…...
STM32 拓展 电源控制
目录 电源控制 电源框图 VDDA供电区域 VDD供电区域 1.8V低电压区域 后备供电区域 电压调节器 上电复位和掉电复位 可编程电压检测器(PVD) 低功耗 睡眠模式(只有CUP(老板)睡眠) 进入睡眠模式 退出睡眠模式 停机(停止)模式(只留核心区域(上班)) 进入停…...
SpringBootWeb案例-1
文章目录 SpringBootWeb案例1. 准备工作1.1 需求&环境搭建1.1.1 需求说明1.1.2 环境搭建 1.2 开发规范 2. 部门管理2.1 查询部门2.1.1 原型和需求2.1.2 接口文档2.1.3 思路分析2.1.4 功能开发2.1.5 功能测试 2.2 前后端联调2.3 删除部门2.3.1 需求2.3.2 接口文档2.3.3 思路…...
HTML——57. type和name属性
<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>type和name属性</title></head><body><!--1.input元素是最常用的表单控件--><!--2.input元素不仅可以在form标签内使用也可以在form标签外使用-…...
应用架构模式-总体思路
采用引导式设计方法:以企业级架构为指导,形成较为齐全的规范指引。在实践中总结重要设计形成决策要点,一个决策要点对应一个设计模式。自底向上总结采用该设计模式的必备条件,将之转化通过简单需求分析就能得到的业务特点…...
vue 虚拟滚动 vue-virtual-scroller RecycleScroller
vue 3 https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md vue 2 https://github.com/Akryum/vue-virtual-scroller/tree/v1/packages/vue-virtual-scroller npm install --save vue-virtual-scrollernextmain.js // 虚拟滚…...
DC-DC 降压转换器设计提示和技巧
基本 DC-DC 降压转换器电路 在开始之前,我们先回顾一下DC-DC降压转换器的电路: 为了帮助您,我开发了降压设计中“什么影响什么”的矩阵: 主要的权衡是电感(与 k 因子成反比,即峰峰值与平均电感电流之比&a…...
多模态论文笔记——Coca
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍多模态模型Coca,在DALLE 3中使用其作为captioner基准模型的原因和优势。 文章目录 ALBEF论文模型结构组成训练目标 CoCa论文模型结构CoCa…...
@Cacheable 注解爆红(不兼容的类型。实际为 java. lang. String‘,需要 ‘boolean‘)
文章目录 1、org.springframework.cache.annotation.Cacheable2、javax.persistence.Cacheable Cacheable(value "findPAUserById", key "#id")public Optional<PAUser> findById(Integer id) {return paUserRepository.findById(id);}我真的要笑死…...
java相互加密解密
java代码 import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import java.util.Base64;public class AesUtils {public static String encrypt(String plaintext, String key, String iv) throws Exception {C…...
PostgreSQL中FIRST_VALUE、LAST_VALUE、LAG 和 LEAD是窗口函数,允许返回在数据集的特定窗口(或分区)内访问行的相对位置
在PostgreSQL中,FIRST_VALUE、LAST_VALUE、LAG 和 LEAD 是窗口函数(window functions),它们允许你在数据集的特定窗口(或分区)内访问行的相对位置。以下是对这些函数的详细解释和用法: 1. FIRS…...
2026届必备的五大AI辅助写作方案推荐榜单
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在人工智能技术参与进来之后,学术论文写作在效率方面有了明显的大幅提升…...
告别PX4,试试APM!用ArduPilot+Gazebo搭建你的第一个无人机仿真环境(附QGC地面站连接)
从PX4到APM:ArduPilot无人机仿真环境全攻略 如果你已经熟悉PX4生态,却对ArduPilot(APM)固件在仿真领域的表现充满好奇,这篇文章将为你打开一扇新的大门。不同于市面上大量聚焦PX4的教程,我们将深入探讨APM在…...
嵌入式开发中的寄存器操作与函数指针应用
1. 嵌入式开发中的寄存器操作技巧在嵌入式系统开发中,直接操作硬件寄存器是最基础也是最核心的技能之一。寄存器是CPU与外围设备交互的窗口,通过读写特定内存地址的寄存器,我们可以控制硬件的行为。下面我将详细介绍几种常见的寄存器操作方法…...
OpenClaw自动化边界:千问3.5-27B不适合处理的五类任务
OpenClaw自动化边界:千问3.5-27B不适合处理的五类任务 1. 为什么需要明确自动化边界? 去年冬天,我花了整整三天时间调试一个OpenClaw自动化流程——让AI帮我整理电脑里积压的200GB设计素材。当看到脚本误删了未备份的客户源文件时ÿ…...
FastAPI系列 4 - 模块化路由的艺术:APIRouter实战指南
1. 为什么需要模块化路由? 第一次用FastAPI开发电商后台时,我把所有路由都堆在main.py里。三个月后这个文件膨胀到2000多行代码,每次修改用户认证逻辑都要在订单处理和商品列表的代码块之间来回翻找。这种经历让我深刻理解了为什么APIRouter会…...
如何用MicroSIP实现远程办公通话?2024最新SIP协议设置指南
2024远程办公通话实战:MicroSIP高级配置与网络优化全攻略 远程办公已成为现代企业运营的标配,而稳定高效的语音通信系统则是团队协作的基石。作为一款轻量级开源SIP客户端,MicroSIP凭借其低延迟、高兼容性和零成本优势,正在成为中…...
Infinity Pro书签迁移终极指南:从JSON文件到本地缓存的完整操作流程
Infinity Pro书签迁移终极指南:从JSON文件到本地缓存的完整操作流程 作为一名长期使用Infinity Pro的开发者,我深知书签迁移的痛点。每次换设备或重装系统,那些精心整理的技术资源库都要重新配置。本文将分享一套经过实战验证的迁移方案&…...
新手入门指南:基于快马生成的代码理解设备配对功能实现
今天想和大家分享一个特别适合新手学习的设备配对功能实现案例。这个例子用最基础的HTML、CSS和原生JavaScript就能完成,特别适合刚接触前端开发的朋友理解交互逻辑。 项目结构设计 整个项目分为三个部分:两个模拟设备(用不同图标表示&#x…...
量子计算入门捷径:在快马平台用qorder实现第一个纠缠态实验
量子计算听起来很高深,但有了合适的工具和平台,入门其实比想象中简单。最近我在InsCode(快马)平台上尝试用qorder框架做了第一个量子纠缠实验,发现整个过程就像搭积木一样直观。下面分享我的学习笔记,希望能帮到同样想入门的朋友。…...
管理员命令提示符 命令提示符 cmd
命令提示符区别...
