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的值。

运行效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65860.shtml

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

相关文章

01-英语准备

首先是自我介绍&#xff0c;中英文都可以&#xff0c;建议提前打好草稿然后开始背&#xff0c;模板网上有很多&#xff0c;可以自行查找&#xff0c;主要就是个人的一些基本情况&#xff0c;竞赛获奖经历&#xff0c;感兴趣的方向等等。接下来就是老师问的一些问题了。 做个英文…

亚信科技研发智能化实践之路

作者&#xff1a;亚信科技高级研发经理史伟星 亚信科技是一家专注于 To B 业务的公司。公司 1993 年成立&#xff0c;于 2000 年成为纳斯达克首批上市的高科技企业。2010 年&#xff0c;通过持续深耕&#xff0c;成为中国领先的通信软件产品服务商。2014 年&#xff0c;完成私…

==和===的区别,被坑的一天

在 JavaScript 中&#xff0c; 和 都用于比较两个值&#xff0c;但它们有一个重要的区别&#xff1a; 1. (宽松相等运算符) 进行比较时&#xff0c;会 自动类型转换&#xff08;也叫做强制类型转换&#xff09;&#xff0c;即如果比较的两个值的类型不同&#xff0c;JavaScr…

如何不修改模型参数来强化大语言模型 (LLM) 能力?

前言 如果你对这篇文章感兴趣&#xff0c;可以点击「【访客必读 - 指引页】一文囊括主页内所有高质量博客」&#xff0c;查看完整博客分类与对应链接。 大语言模型 (Large Language Model, LLM, e.g. ChatGPT) 的参数量少则几十亿&#xff0c;多则上千亿&#xff0c;对其的训…

使用Python和OpenCV进行视觉图像分割

简介&#x1f381; 在图像处理领域&#xff0c;图像分割是一项基础且关键的技术&#xff0c;它涉及到将图像划分为若干个具有特定属性的区域。本文将通过一个实践项目&#xff0c;展示如何使用Python编程语言&#xff0c;结合OpenCV库&#xff0c;对一张玫瑰花的图片进行图像分…

代码解析:安卓VHAL的AIDL参考实现

以下内容基于安卓14的VHAL代码。 总体架构 参考实现采用双层架构。上层是 DefaultVehicleHal&#xff0c;实现了 VHAL AIDL 接口&#xff0c;并提供适用于所有硬件设备的通用 VHAL 逻辑。下层是 FakeVehicleHardware&#xff0c;实现了 IVehicleHardware 接口。此类可模拟与实…

vLLM结构化输出(Guided Decoding)

简介 vLLM 的结构化输出特性是通过“引导式解码”&#xff08;Guided Decoding&#xff09;实现的&#xff0c;这一功能允许模型在生成文本时遵循特定的格式约束&#xff0c;例如 JSON 模式或正则表达式&#xff0c;从而确保生成的内容符合预期的结构化要求。 后端引擎 启动…

部署SenseVoice

依赖 Conda cuda pythor 查看GPU版本-CSDN博客 创建虚拟conda环境 conda create --name deeplearn python3.10 conda activate deeplearn git clone https://github.com/FunAudioLLM/SenseVoice.git cd SenseVoice pip install -r requirements.txt pip install gradio pip …

基于51单片机(STC32G12K128)和8X8彩色点阵屏(WS2812B驱动)的小游戏《贪吃蛇》

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

关于flinkCDC监控mysql binlog时,datetime类型自动转换成时间戳类型问题

flinkCDC监控mysql binlog时&#xff0c;datetime类型自动转换成时间戳类型 问题解决1.自定义转换器类2.代码引用 结果 问题 flink版本&#xff1a;1.18.1&#xff0c;mysql版本&#xff1a;8.0.40 使用FlinkCDC的MySqlSource 连接mysql&#xff0c;对于datetime 类型字段&…

SwiftUI 撸码常见错误 2 例漫谈

概述 在 SwiftUI 日常撸码过程中&#xff0c;头发尚且还算茂盛的小码农们经常会犯这样那样的错误。虽然犯这些错的原因都很简单&#xff0c;但有时想要快速准确的定位它们却并不容易。 况且这些错误还可能在模拟器和 Xcode 预览&#xff08;Preview&#xff09;表现的行为不甚…

【Unity】 HTFramework框架(五十八)【进阶篇】资源及代码热更新实战演示(Deployment + HybridCLR)

更新日期&#xff1a;2025年1月2日。 Github源码&#xff1a;[点我获取源码] 索引 资源及代码热更新实战演示运行演示Demo1.克隆项目工程2.更新子模块3.打开项目4.打开入口场景5.设置远端资源服务器地址6.导入HybridCLR7.初始化HybridCLR8.发布项目9.部署资源版本10.运行Exe11.…

(五)人工智能进阶:基础概念解释

前面我们介绍了人工智能是如何成为一个强大函数。接下来&#xff0c;搞清损失函数、优化方法和正则化等核心概念&#xff0c;才能真正驾驭它&#xff01; 1. 什么是网络模型&#xff1f; 网络模型就像是一个精密的流水线工厂&#xff0c;由多个车间&#xff08;层&#xff0…

初学STM32 --- 外部SRAM

SRAM简介 静态随机存取存储器&#xff08;Static Random-Access Memory&#xff0c;SRAM&#xff09; 1M字节容量的SRAM芯片XM8A51216为例介绍。 SRAM特性: 高速&#xff1a;具有最高访问速度15ns 低功耗&#xff1a;80MHz时55mA&#xff0c;待机电流 20mA TTL电平兼容 …

Zabbix:自动发现功能讲解,包括网络发现、自动注册、低级别自动发现以及案例分享。

ZBX&#xff1a;自动发现功能讲解 视频讲解&#xff1a;Zabbix 自动发现网络发现概述操作方法 自动注册概述操作方法 低级别自动发现概述工作原理及工作流程案例1&#xff0c;base进程监控要求&#xff1a;步骤&#xff1a; 案例2&#xff0c;磁盘IO监控要求&#xff1a;步骤&a…

Windows上安装Go并配置环境变量(图文步骤)

前言 1. 本文主要讲解的是在windows上安装Go语言的环境和配置环境变量&#xff1b; Go语言版本&#xff1a;1.23.2 Windows版本&#xff1a;win11&#xff08;win10通用&#xff09; 下载Go环境 下载go环境&#xff1a;Go下载官网链接(https://golang.google.cn/dl/) 等待…

#端云一体化开发# #HarmonyOS Next#《说书人》鸿蒙原生基于角色的对话式文本编辑开发方案

1、写在前面 过去的一百年里&#xff0c;在“编程”的这个行业诞生之初&#xff0c;人们采用面向过程的方式进行开发&#xff0c;但是&#xff0c;伴随着程序规模的日益增大&#xff0c;程序的复杂度也随之增加&#xff0c;使用结构化编程方法来管理复杂的程序逻辑变得越来越困…

xadmin后台首页增加一个导入数据按钮

xadmin后台首页增加一个导入数据按钮 效果 流程 1、在添加小组件中添加一个html页面 2、写入html代码 3、在urls.py添加导入数据路由 4、在views.py中添加响应函数html代码 <!DOCTYPE html> <html lang

【AimRT】现代机器人通信中间件 AimRT

目录 一、什么是AimRT二、AimRT与ROS22.1 定位与设计2.2 组成与通信方式对比 三、AimRT基本概念3.1 Node、Pkg 和 Module3.2 Protocol、Channel、Rpc 和 Filter3.3 App模式 和 Pkg模式3.4 Executor3.5 Plugin 一、什么是AimRT AimRT 是智元机器人公司自主研发的一款机器人通信…

mysql系列7—Innodb的redolog

背景 本文涉及的内容较为底层&#xff0c;做了解即可&#xff0c;是以前学习《高性能Mysql》和《mysql是怎样运行的》的笔记整理所得。 redolog(后续使用redo日志表示)的核心作用是保证数据库的持久性。 在mysql系列5—Innodb的缓存中介绍过&#xff1a;数据和索引保存在磁盘上…