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

vue使用el-select下拉框自定义复选框

在 Vue 开发中,高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。

一、代码功能概述

这段代码创建了一个可多选的下拉框组件,通过el-select和el-checkbox-group结合的方式,实现了多个选项的选择功能。用户可以从给定的选项中选择一个或多个,并且可以通过selectChange方法实时更新已选择的值。

二、代码结构解析

  1. 模板部分
<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 开发中&#xff0c;高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。 一、代码功能概述 这段代码创建了一个可多选的下拉框组件&#xff0c;通过el-select和el-checkbox-group结合的方…...

k8s基础(2)—Kubernetes-Namespace

一、Namespace概述 名字空间 在 Kubernetes 中&#xff0c;名字空间&#xff08;Namespace&#xff09; 提供一种机制&#xff0c;将同一集群中的资源划分为相互隔离的组。 同一名字空间内的资源名称要唯一&#xff0c;但跨名字空间时没有这个要求。 名字空间作用域仅针对带有…...

APM for Large Language Models

APM for Large Language Models 随着大语言模型&#xff08;LLMs&#xff09;在生产环境中的广泛应用&#xff0c;确保其可靠性和可观察性变得至关重要。应用性能监控&#xff08;APM&#xff09;在这一过程中发挥了关键作用&#xff0c;帮助开发者和运维人员深入了解LLM系统的…...

Spark Runtime Filter

Runtime Filter 参考链接&#xff1a; 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网络是什么&#xff1f; 输入模块结构&#xff1a; 编码器模块结构&#xff1a; 解码器模块: 输出模块结构&#xff1a; Transformer 具体是如何工作的&#xff1f; Transformer核心思想是什么&#xff1f; Transformer的代码架构 自注意力机制是什么…...

基于51单片机(STC12C5A60S2)和8X8彩色点阵屏(WS2812B驱动)的小游戏《贪吃蛇》(普中开发板矩阵按键控制)

目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、定时器02、矩阵按键3、8X8彩色点阵屏 四、主函数总结 系列文章目录 前言 《贪吃蛇》&#xff0c;一款经典的、怀旧的小游戏&#xff0c;单片机入门必写程序。 以《贪吃蛇》为载体&#xff0c;熟悉各种屏幕的使…...

遇到复杂的 递归查询sql 需要oracle 转pgsql 可以把数据表结构给ai

遇到复杂的 递归查询sql 需要oracle 转pgsql 可以把数据表结构给ai 并且 建立备份表 把需要的很少的数据放到表里面 这样 ai 可以很好的判断sql 咋写 还可以&#xff0c;让ai解释oracle sql 然后拿到描述和表和字段&#xff0c;给ai让他生成pgsql 的sql&#xff0c;亲测有效...

Zynq PS端外设之GPIO

1. GPIO&#xff08;通用输入/输出&#xff09; GPIO外设有4个Bank&#xff0c;Bank0/1通过MIO连接到PS的引脚上&#xff1b;Bank2/3通过EMIO连接到PL的引脚上。 注意&#xff1a;Bank1的电平要改成LVCOMS 1.8 GPIO寄存器 寄存器&#xff1a; DATA_RO&#xff1a; 读取GPIO的输…...

Spring Boot项目开发常见问题及解决方案(上)

启动相关问题 问题 1&#xff1a;项目启动时报错“找不到主类” 在使用 Spring Boot 打包成可执行 JAR 文件后启动&#xff0c;有时会遇到这个头疼的问题。通常是因为打包配置有误或者项目结构不符合要求。 解决方案&#xff1a; 首先&#xff0c;检查 pom.xml&#xff08;Ma…...

Elasticsearch: 高级搜索

这里写目录标题 一、match_all匹配所有文档1、介绍&#xff1a; 二、精确匹配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标签外使用-…...

应用架构模式-总体思路

采用引导式设计方法&#xff1a;以企业级架构为指导&#xff0c;形成较为齐全的规范指引。在实践中总结重要设计形成决策要点&#xff0c;一个决策要点对应一个设计模式。自底向上总结采用该设计模式的必备条件&#xff0c;将之转化通过简单需求分析就能得到的业务特点&#xf…...

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 降压转换器电路 在开始之前&#xff0c;我们先回顾一下DC-DC降压转换器的电路&#xff1a; 为了帮助您&#xff0c;我开发了降压设计中“什么影响什么”的矩阵&#xff1a; 主要的权衡是电感&#xff08;与 k 因子成反比&#xff0c;即峰峰值与平均电感电流之比&a…...

多模态论文笔记——Coca

大家好&#xff0c;这里是好评笔记&#xff0c;公主号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本文详细介绍多模态模型Coca&#xff0c;在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中&#xff0c;FIRST_VALUE、LAST_VALUE、LAG 和 LEAD 是窗口函数&#xff08;window functions&#xff09;&#xff0c;它们允许你在数据集的特定窗口&#xff08;或分区&#xff09;内访问行的相对位置。以下是对这些函数的详细解释和用法&#xff1a; 1. FIRS…...

Glide框架在Java中的高效集成与动图加载实践

1. 为什么选择Glide处理Java项目中的动图加载 第一次在Android项目里遇到动图加载需求时&#xff0c;我试过用原生ImageView逐帧解析&#xff0c;结果内存直接爆了。后来发现Glide这个宝藏框架&#xff0c;它就像个智能的动图管家&#xff0c;把复杂的解码、内存管理、缓存优化…...

COMSOL激光打孔形貌优化:不同入射角设置方法与模型注释解析

COMSOL 不同激光入射角打孔形貌设置方法 模型内容&#xff1a;不同激光入射角度的设置 优势&#xff1a;视频教学和模型注释清晰明了&#xff0c;各个情况都有涉及可参考性极强&#xff0c;可以修改&#xff0c;收敛性已调至最优&#xff0c;本案例可进行拓展应用服务&#xff…...

突破限制的完整方案:开源工具免费解锁Cursor Pro功能实战指南

突破限制的完整方案&#xff1a;开源工具免费解锁Cursor Pro功能实战指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached y…...

SaaS的末日重构:AI Agent浪潮下的危机与新生

目录 前言 一、 市场恐慌的源头&#xff1a;“软件-PE”的死亡循环 二、 核心重构&#xff1a;AI 将如何改造企业级 SaaS&#xff1f; 2.1 交互层的降维打击&#xff1a;从“点界面”到“说意图” 2.2 流程层的动态重组&#xff1a;从“应用中心”到“工作流中心” 2.3 定…...

SiameseAOE中文-base高性能部署:WebUI响应<800ms,吞吐达12QPS(RTX4090)

SiameseAOE中文-base高性能部署&#xff1a;WebUI响应<800ms&#xff0c;吞吐达12QPS&#xff08;RTX4090&#xff09; 今天要跟大家聊一个非常实用的工具——SiameseAOE通用属性观点抽取模型。你可能听说过信息抽取&#xff0c;但面对海量文本&#xff0c;如何快速、准确地…...

保姆级教程:为你的Python Flask/Vue项目配置Nginx HTTPS,并解决SSE流响应卡顿问题

保姆级教程&#xff1a;为你的Python Flask/Vue项目配置Nginx HTTPS&#xff0c;并解决SSE流响应卡顿问题 当你将Python Flask后端与Vue前端项目部署到生产环境时&#xff0c;配置HTTPS是必不可少的安全措施。但许多开发者发现&#xff0c;在启用HTTPS后&#xff0c;原本流畅的…...

Kettle数据迁移实战:从CSV到MySQL的高效导入指南

1. 为什么选择Kettle进行CSV到MySQL的数据迁移 第一次接触数据迁移任务时&#xff0c;我试过用Python脚本逐行读取CSV写入MySQL&#xff0c;结果导入10万条数据花了近20分钟。后来发现Kettle这个神器&#xff0c;同样的数据量只需要2分钟就能搞定&#xff0c;效率提升简直惊人。…...

卡尔曼滤波调参实战:如何用MATLAB让MPU6050的加速度数据更‘听话’?

卡尔曼滤波调参实战&#xff1a;如何用MATLAB让MPU6050的加速度数据更‘听话’&#xff1f; 当你在MATLAB中第一次看到MPU6050的原始加速度数据时&#xff0c;那些疯狂跳动的曲线可能会让你怀疑人生。别担心&#xff0c;这不是传感器坏了&#xff0c;而是现实世界本就充满噪声…...

终极指南:PrivateGPT增量文档处理策略与动态更新解决方案

终极指南&#xff1a;PrivateGPT增量文档处理策略与动态更新解决方案 【免费下载链接】privateGPT 利用GPT的强大功能与你的文档进行互动&#xff0c;确保100%的隐私保护&#xff0c;无数据泄露风险 项目地址: https://gitcode.com/GitHub_Trending/pr/privateGPT Priva…...

C++高性能服务开发:忍者像素绘卷推理引擎封装

C高性能服务开发&#xff1a;忍者像素绘卷推理引擎封装 1. 为什么需要高性能推理引擎 在游戏开发领域&#xff0c;实时生成高质量像素艺术的需求正在快速增长。传统的预渲染方式无法满足玩家对个性化内容和动态场景的需求&#xff0c;而直接使用Python等脚本语言运行的AI模型…...