el-select的下拉选择框插入el-checkbox

el-check注意这里要使用model-value绑定数据

<el-selectv-model="selectDevice"multiplecollapse-tags:multiple-limit="5"style="width: 200px"popper-class="select-popover-class"
><el-optionv-for="item in deviceList":key="item.value":label="item.label":value="item.value"><el-checkbox :model-value="selectDevice.includes(item.value)">{{ item.label }}</el-checkbox></el-option>
</el-select>

css样式处理:

/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox {padding: 5px 20px;
}/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {pointer-events: none;
}/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {display: none;
}

完整代码:

<template><div><el-selectv-model="selectDevice"multiplecollapse-tags:multiple-limit="5"style="width: 200px"popper-class="select-popover-class"><el-optionv-for="item in deviceList":key="item.value":label="item.label":value="item.value"><el-checkbox :model-value="selectDevice.includes(item.value)">{{ item.label }}</el-checkbox></el-option></el-select></div>
</template><script setup lang="ts">
import { ref } from "vue";const selectDevice = ref<Array<string>>([]);
const deviceList = ref([{value: "1",label: "设备1",},{value: "2",label: "设备2",},{value: "3",label: "设备3",},{value: "4",label: "设备4",},
]);
</script><style lang="scss" scoped>
/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox {padding: 5px 20px;
}/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {pointer-events: none;
}/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {display: none;
}
</style>

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

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

相关文章

20250304在Ubuntu20.04的GUI下格式化exFAT格式的TF卡为ext4格式

20250304在Ubuntu20.04的GUI下格式化exFAT格式的TF卡为ext4格式 2025/3/4 16:47 缘起&#xff1a;128GB的TF卡&#xff0c;只能格式化为NTFS/exFAT/ext4。 在飞凌的OK3588-C下&#xff0c;NTFS格式只读。 exFAT需要改内核来支持。 现在只剩下ext4了。 linux R4默认不支持exFAT…

DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)示例1:基础表格

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…

【Linux】【网络】UDP打洞-->不同子网下的客户端和服务器通信(未成功版)

【Linux】【网络】UDP打洞–>不同子网下的客户端和服务器通信&#xff08;未成功版&#xff09; 上次说基于UDP的打洞程序改了五版一直没有成功&#xff0c;要写一下问题所在&#xff0c;但是我后续又查询了一些资料&#xff0c;成功实现了&#xff0c;这次先写一下未成功的…

C# Unity 唐老狮 No.4 模拟面试题

本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: 全部 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho 如果你发现了文章内特殊的字体格式,…

数据结构——队列

1. 概念与结构 队列&#xff08;Queue&#xff09;是一种先进先出&#xff08;FIFO, First In First Out&#xff09;的数据结构&#xff0c;即最先被插入队列的数据会最先被删除。队列广泛应用于计算机科学中&#xff0c;特别是在任务调度、缓冲区管理、网络数据传输等领域。…

大语言模型技术发展

摘要 海外闭源模型领域竞争激烈&#xff0c;OpenAI 保持领先地位&#xff0c;而开源模型如 Meta 的 Llama 系列也逐渐崛起。LLM 技术呈现出大型模型和小型模型并行发展的趋势&#xff0c;同时&#xff0c;多模态功能和长上下文能力成为顶级模型的标准配置。MoE 架构的出现推动…

数据结构入门篇——什么是数据结构。

一、引入 工具是一种什么东西呢&#xff1f;是一种转化媒介&#xff0c;我们需要熟食&#xff0c;我们要通过用火来将生肉烤熟。在这个过程中。我们要输入一个东西——生肉&#xff0c;通过工具——火的加工&#xff0c;从而得到我们的目的产物——熟肉。 将上面的例子和红字部…

DeepSeek掘金——DeepSeek R1驱动的PDF机器人

DeepSeek掘金——DeepSeek R1驱动的PDF机器人 本指南将引导你使用DeepSeek R1 + RAG构建一个功能性的PDF聊天机器人。逐步学习如何增强AI检索能力,并创建一个能够高效处理和响应文档查询的智能聊天机器人。 本指南将引导你使用DeepSeek R1 + RAG构建一个功能性的PDF聊天机器人…

sqli-labs靶场通关

一.less-16 1.寻找注入点 发现url无法回显 构造闭合无论 还是 "都没有任何反应 最后发现闭合符号为")时成功登录 没有回显使用盲注 2.爆数据库 12") or (length(database()))8# 爆出数据库长度 获取数据库名&#xff0c;第一个字母的ascii码值 12") …

使用VSCode Debugger 调试 React项目

点击创建 launch.json 文件 端口号改成我们项目的端口号3000即可&#xff0c;保存 "version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "针对 loca…

AI 芯片全解析:定义、市场趋势与主流芯片对比

1. 引言&#xff1a;什么是 AI 芯片&#xff1f; 随着人工智能&#xff08;AI&#xff09;的快速发展&#xff0c;AI 计算的需求不断增长&#xff0c;从云计算到边缘计算&#xff0c;AI 芯片成为推动智能化时代的核心动力。那么&#xff0c;什么样的芯片才算 AI 芯片&#xff…

Linux第五讲----gcc与g++,makefile/make

1.代码编译 1.1预处理 我们通过vim编辑完文件之后&#xff0c;想看一下运行结果这时我们便可以试用gcc编译C语言&#xff0c;g编译c. 编译代码&#xff1a; 上述两种方法均可&#xff0c;code.c是我的c语言文件&#xff0c;mycode是我给编译后产生的二进制文件起的名&#x…

知识图谱+智能问诊预诊系统vue+django+neo4j架构、带问诊历史

文章结尾部分有CSDN官方提供的学长 联系方式名片 文章结尾部分有CSDN官方提供的学长 联系方式名片 关注B站&#xff0c;有好处&#xff01; &#x1f90d;编号&#xff1a;D032 &#x1f90d;智能问答&#xff1a;智能问答自诊、预诊功能&#xff0c;同时可以保存问答历史 &…

Chromium_src源码

Chromium_src源码 码云上有一个OpenHarmony-TPC/chromium_src项目&#xff0c;目前已经停止维护了&#xff0c;迁移到GitCode上了&#xff0c;源代码项目地址为&#xff1a;openharmony-tpc/chromium_chrome 特此记录一下老的项目的相关软件架构 Chromium 简介 软件架构 软…

深度学习神经网络分类原理

每一个神经元做的是一个类似回归的操作 最后一层是softmax函数&#xff0c;每一个输出就会变成一个0到1之间的数&#xff0c;也就是概率&#xff0c;然后他们之间的和加起来等于1&#xff0c;到底是哪一个分类就是看哪个神经元的这个值最大。 那么如何算损失呢&#xff1a; 加…

编程题 - 汽水瓶【JavaScript/Node.js解法】

‌“学如逆水行舟&#xff0c;不进则退。”‌ ——《增广贤文》 目录 汽水瓶 题目&#xff1a;解答分析&#xff1a;js代码解答 -ACM模式&#xff1a;代码通过&#xff1a;题解分析&#xff1a;简洁思路代码&#xff1a; 汽水瓶 题目&#xff1a; 某商店规定&#xff1a;三个空…

Oracle 数据库基础入门(四):分组与联表查询的深度探索(上)

在 Oracle 数据库的学习进程中&#xff0c;分组查询与联表查询是进阶阶段的重要知识点&#xff0c;它们如同数据库操作的魔法棒&#xff0c;能够从复杂的数据中挖掘出有价值的信息。对于 Java 全栈开发者而言&#xff0c;掌握这些技能不仅有助于高效地处理数据库数据&#xff0…

Mybatis实现批量添加

1.设计一张商品表 CREATE TABLE IF NOT EXISTS goods (id BIGINT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(255) NOT NULL );2.编写实体类映射数据库表格 Data public class Goods {private Long id;private String name;// Getters and Setters }3.编写持久层接口以及其对应…

FPGA开发时序图绘制

开始的时候画时序图都是拿 visio 硬连&#xff0c;但是那个线宽太难统一了&#xff0c;丑不拉几的&#xff0c;遂学习 waveform 语法使用代码来画时序图。 开始 Vscode 中安装 waveform render 或者在 GitHub 搜索 wavedrom 安装即可。由于 vscode 是我常用的编辑器&#xff…

【Python爬虫】爬取公共交通路网数据

程序来自于Github&#xff0c;以下这篇博客作为完整的学习记录&#xff0c;也callback上一篇爬取公共交通站点的博文。 Bardbo/get_bus_lines_and_stations_data_from_gaode: 这个项目是基于高德开放平台和公交网获取公交线路及站点数据&#xff0c;并生成shp文件&#xff0c;…