Vue3 Element-plus 封装Select下拉复选框选择器

废话不多说,样式如下,代码如下,需要自取
在这里插入图片描述

<template><el-selectv-model="selectValue"class="checkbox-select"multiple:placeholder="placeholder":style="{ width: width }"@change="changeSelect"><div class="checkboxWrapper"><el-checkbox v-model="checked"> 全选 </el-checkbox></div><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"><el-checkbox :model-value="selectValue.includes(item.value)">{{ item.label }}</el-checkbox></el-option></el-select>
</template><script setup lang="ts">
import { computed } from 'vue'
import { useVModel } from '@vueuse/core'interface Option {label: stringvalue: number
}interface Props {modelValue: number[]options: Option[]placeholder?: stringwidth?: string
}interface Emits {(e: 'update:modelValue', value: number[]): void(e: 'change', value: number[]): void
}const props = withDefaults(defineProps<Props>(), {placeholder: '请选择',width: '200px',
})const emit = defineEmits<Emits>()defineOptions({name: 'CheckboxSelect',
})// 使用useVModel处理数据同步
const selectValue = useVModel(props, 'modelValue', emit)// 计算全选状态
const checked = computed({get: () => {const resValues = props.options.map((item) => item.value)return selectValue.value.length === resValues.length},set: (value: boolean) => {const resValues = props.options.map((item) => item.value)if (!value) {// 如果checkbox为false,则为反选,选择数组为空emit('update:modelValue', [])} else {// 如果checkbox为true,则为全选,选择数组添加所有数据emit('update:modelValue', [...resValues])}},
})// 选择变化处理
const changeSelect = (val: number[]) => {emit('change', val)
}
</script><style scoped>
.checkbox-select {width: 100%;
}.checkboxWrapper {padding: 0px 20px;
}/* 选项复选框样式 */
:deep(.el-select-dropdown__item .el-checkbox) {width: 100%;margin: 0;
}:deep(.el-select-dropdown__item .el-checkbox .el-checkbox__label) {padding-left: 8px;
}
</style>
 <CheckboxSelectv-model="searchForm.statusList":options="statusOptions"placeholder="请选择状态"width="200px"@change="changeHandle"
/>// 搜索表单
const searchForm = reactive({statusList: [] as number[], // 多选数组
})// 状态选项
const statusOptions = ref([{ label: '启用', value: 1 },{ label: '禁用', value: 2 },
])// 选择变化处理
const changeHandle = (val: number[]) => {console.log(val, '状态选择变化')
}

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

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

相关文章

jenkins 自动部署

一、win10 环境安装&#xff1a; 1、jdk 下载安装&#xff1a;Index of openjdk-local 2、配置环境变量&#xff1a; 3、jenkins 下载&#xff1a;Download and deploy 下载后的结果&#xff1a;jenkins.war 4、jenkins 启动&#xff1a; 5、创建管理员用户 admin 登录系统…

2020 GPT3 原文 Language Models are Few-Shot Learners 精选注解

本文为个人阅读GPT3&#xff0c;部分内容注解&#xff0c;由于GPT3原文篇幅较长&#xff0c;且GPT3无有效开源信息 这里就不再一一粘贴&#xff0c;仅对原文部分内容做注解&#xff0c;仅供参考 详情参考原文链接 原文链接&#xff1a;https://arxiv.org/pdf/2005.14165 语言模…

设计模式笔记_行为型_迭代器模式

1. 迭代器模式介绍迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为设计模式&#xff0c;旨在提供一种方法顺序访问一个聚合对象中的各个元素&#xff0c;而又不需要暴露该对象的内部表示。这个模式的主要目的是将集合的遍历与集合本身分离&#xff0c;使得用户可…

【Part 4 未来趋势与技术展望】第一节|技术上的抉择:三维实时渲染与VR全景视频的共生

《VR 360全景视频开发》专栏 将带你深入探索从全景视频制作到Unity眼镜端应用开发的全流程技术。专栏内容涵盖安卓原生VR播放器开发、Unity VR视频渲染与手势交互、360全景视频制作与优化&#xff0c;以及高分辨率视频性能优化等实战技巧。 &#x1f4dd; 希望通过这个专栏&am…

mac查看nginx安装位置 mac nginx启动、重启、关闭

安装工具&#xff1a;homebrew步骤&#xff1a;1、打开终端&#xff0c;习惯性命令&#xff1a;brew update //结果&#xff1a;Already up-to-date.2、终端继续执行命令&#xff1a;brew search nginx //查询要安装的软件是否存在3、执行命令&#xff1a;brew info nginx4. …

网络通信的基本概念与设备

目录 一、互联网 二、JAVA跨平台与C/C的原理 1、JAVA跨平台的原理 2、C/C跨平台的原理 三、网络互连模型 四、客户端与服务器 五、计算机之间的通信基础 1、IP地址与MAC地址 2、ARP与ICMP对比 ①ARP协议&#xff08;地址解析协议&#xff09; ②ICMP协议&#xff08…

云原生俱乐部-k8s知识点归纳(1)

这篇文章主要是讲讲k8s中的知识点归纳&#xff0c;以帮助理解。虽然平时也做笔记和总结&#xff0c;但是就将内容复制过来不太好&#xff0c;而且我比较喜欢打字。因此知识点归纳总结还是以叙述的口吻来说说&#xff0c;并结合我的理解加以论述。k8s和docker首先讲一讲docker和…

基于Node.js+Express的电商管理平台的设计与实现/基于vue的网上购物商城的设计与实现/基于Node.js+Express的在线销售系统

基于Node.jsExpress的电商管理平台的设计与实现/基于vue的网上购物商城的设计与实现/基于Node.jsExpress的在线销售系统

Git 对象存储:理解底层原理,实现高效排错与存储优化

### 探秘 Git 对象存储&#xff1a;底层原理与优化实践#### 一、Git 对象存储的底层原理 Git 采用**内容寻址文件系统**&#xff0c;核心机制如下&#xff1a; 1. **对象类型与存储** - **Blob 对象**&#xff1a;存储文件内容&#xff0c;通过 git hash-object 生成唯一 SHA-…

【2025CVPR-目标检测方向】RaCFormer:通过基于查询的雷达-相机融合实现高质量的 3D 目标检测

1. 研究背景与动机​ ​问题​:现有雷达-相机融合方法依赖BEV特征融合,但相机图像到BEV的转换因深度估计不准确导致特征错位;雷达BEV特征稀疏,相机BEV特征因深度误差存在畸变。 ​核心思路​:提出跨视角查询融合框架,通过对象查询(object queries)同时采样图像视角(原…

【每日一题】Day 7

560.和为K的子数组 题目&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2 示例 2&#x…

3ds MAX文件/贴图名称乱码?6大根源及解决方案

在3ds MAX渲染阶段&#xff0c;文件或贴图名称乱码导致渲染失败&#xff0c;是困扰众多用户的常见难题。其背后原因多样&#xff0c;精准定位方能高效解决&#xff1a;乱码核心根源剖析字符编码冲突 (最常见)非ASCII字符风险&#xff1a; 文件路径或名称包含中文、日文、韩文等…

链路聚合路由器OpenMPTCProuter源码编译与运行

0.前言 前面写了两篇关于MPTCP的文章&#xff1a; 《链路聚合技术——多路径传输Multipath TCP(MPTCP)快速实践》《使用MPTCPBBR进行数据传输&#xff0c;让网络又快又稳》 对MPTCP有了基本的了解与实践&#xff0c;并在虚拟的网络拓扑中实现了链路带宽的叠加。 1.OpenMPTC…

AI时代企业转型指南:用AI降本增效,销售转化翻3倍,获客成本砍一半!

AI时代&#xff0c;大部分企业每天都在问同一个问题&#xff1a;AI到底能帮我做什么&#xff1f;无论你是做电商、做IP、做操盘手&#xff0c;还是传统企业老板&#xff0c;你都会发现一个现实——AI真正的用途是用来在业务场景里直接降本增效的。对我个人来说&#xff0c;AI已…

【牛客刷题】最大公约数与最小公倍数:算法详解与实现

文章目录 一、题目介绍 1.1 输入描述 1.2 输出描述 1.3 示例(含详细注释) 二、考察的知识点 三、算法设计思路 3.1 最大公约数(GCD) 3.2 最小公倍数(LCM) 四、流程图 五、题解实现 六、复杂度分析 七、关键算法知识点 一、题目介绍 计算两个整数的**最大公约数(GCD)和最小公…

将 iPhone 联系人转移到 Infinix 的完整指南

从 iPhone 切换到 Infinix 设备是一次令人兴奋的升级&#xff0c;但在切换过程中&#xff0c;转移个人数据&#xff08;尤其是联系人&#xff09;可能会有些棘手。联系人是任何手机上最重要的信息类型之一&#xff0c;如果在切换过程中丢失它们&#xff0c;会带来很大的不便。由…

Clipboard.js 复制内容

插件地址 clipboard.js 中文网 安装 npm install clipboard --save使用示例 <template><div><div class"copyBtn" click"copyText">复制文本</div ></div> </template><script> // 引入clipboard.js import…

蛇形方阵构造

给出方阵的长宽&#xff0c;n 和 m &#xff0c;按照斜着的蛇形输出该方阵 面试官给的送分题裸模拟&#xff0c;写的太慢了没过&#xff0c;实际确实慢&#xff0c;结束后起码用了一个多小时才调完 找了下没找到leetcode 提交的地方&#xff0c;各种oj 倒是有&#xff0c;不过是…

传统方式部署(RuoYi-Cloud)微服务

实验环境192.168.10.43和192.168.10.44内存不能小于4G一、安装MySQL&#xff08;192.168.10.46&#xff09;1、安装MySQL依赖库dnf -y install ncurses-compat-libs2、上传mysql-8.0.42-linux-glibc2.17-x86_64-minimal.tar.xz二进制包到/root目录&#xff0c;解压并移动到指定…

Linux网络服务(一)——计算机网络参考模型与子网划分

文章目录前言一、分层思想1.1 分层的基本概念1.2 点到点与端到端通信的区别二、OSI参考模型2.1 OSI七层模型的结构2.2 各层功能示例&#xff08;以QQ为例&#xff09;2.3 单工&#xff0c;半双工和全双工2.4 OSI七层模型总结三、TCP/IP模型3.1 TCP/IP四层与五层模型3.2 TCP/IP协…