vue3+element下拉多选框组件


<!-- 下拉多选 -->
<template><div class="select-checked"><el-select v-model="selected" :class="{ all: optionsAll, hidden: selectedOptions.data.length < 2 }" multipleplaceholder="请选择" :popper-append-to-body="false" collapse-tags popper-class="select-popper"><template v-if="selectedOptions.data.length > 1" #prefix><div class="multi">(多选) x {{ selectedOptions.data.length }}</div></template><el-option class="multiple" :value="item.value" :label="item.label" v-for="(item, key) in optionsData.data":key="key"><el-checkbox v-model="item.check" @change="handleTaskItemChange(item)" style="width: 100%;">{{ item.label }}</el-checkbox></el-option><div class="is-all"><div @click="handleOptionsAllChange(true)">全选</div><div @click="handleOptionsAllChange(false)">反选</div></div></el-select></div>
</template><script setup>
import { ref, reactive, computed, watch, defineProps, onMounted } from 'vue'let props = defineProps({options: {type: Array,required: true}
})let optionsData = reactive({ data: [] })let selectedOptions = reactive({ data: [] })let optionsAll = ref(false)const emit = defineEmits(['selected']);watch(() => props.options, (newVal) => {optionsData.data = newVal;let checkedData = newVal.filter((item) => item.check);selectedOptions.data = checkedData.map((item) => item.value);optionsAll.value = checkedData.length === newVal.length;
}, { immediate: true })onMounted(() => {// 在控件载入时触发父级的selected方法emit('selected', selectedOptions.data);
})const selected = computed({get() {return selectedOptions.data.length > props.options.length ? [''] : selectedOptions.data;},set(value) {selectedOptions.data = value;}
})const handleOptionsAllChange = (isAll) => {optionsData.data.forEach((elm) => {elm.check = isAll;});selectedOptions.data = isAll ? optionsData.data.map((item) => item.value) : [];emit('selected', selectedOptions.data);
}const handleTaskItemChange = (item) => {if (!item.check) {selectedOptions.data = selectedOptions.data.filter((value) => value !== item.value);} else {selectedOptions.data.push(item.value);}optionsAll = selectedOptions.data.length === optionsData.data.length;emit('selected', selectedOptions.data);
}</script><style lang="scss">
.select-checked {width: 420px;height: 30px;.el-input {width: 420px;height: 30px;}// tag删除图标.el-tag__close,.el-icon-close {display: none;}// 标签tag背景.el-tag.el-tag--info {background: transparent;border: 0;display: none;}// 第一个显示名称.hidden {.el-tag.is-closable.el-tag--default {display: block;line-height: 30px;padding-left: 15px;font-weight: 400;color: #333333;}}
}.is-all {display: flex;div {cursor: pointer;margin: 6px 10px;transition: 0.2s;&:hover {opacity: .7;}}
}.multi {font-size: 12px;font-weight: 400;color: #333333;
}
</style>
<style>
.el-select-dropdown.is-multiple.el-select-dropdown__item.selected::after {content: none;
}
</style>
使用:
<selectMulti :options="options" @selected="selected"></selectMulti>let options = [{value: '001',label: '黄金糕',check: false},{value: '002',label: '双皮奶',check: false},{value: '003',label: '蚵仔煎',check: false},{value: '004',label: '龙须面',check: false},{value: '005',label: '北京烤鸭',check: false}
]const selected = (value) => {console.log(value);
}
相关文章:
vue3+element下拉多选框组件
<!-- 下拉多选 --> <template><div class"select-checked"><el-select v-model"selected" :class"{ all: optionsAll, hidden: selectedOptions.data.length < 2 }" multipleplaceholder"请选择" :popper-app…...
Python科研绘图--Task02
目录 图形元素 画布 (fifigure)。 坐标图形 (axes),也称为子图。 轴 (axis) :数据轴对象,即坐标轴线。 刻度 (tick),即刻度对象。 图层顺序 轴比例和刻度 轴比例 刻度位置和刻度格式 坐标系 直角坐标系 极坐标系 地理…...
[保研/考研机试] KY11 二叉树遍历 清华大学复试上机题 C++实现
题目链接: 二叉树遍历_牛客题霸_牛客网编一个程序,读入用户输入的一串先序遍历字符串,根据此字符串建立一个二叉树(以指针方式存储)。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/43719512169254700747…...
【官方中文文档】Mybatis-Spring #简介
简介 什么是 MyBatis-Spring? MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中。它将允许 MyBatis 参与到 Spring 的事务管理之中,创建映射器 mapper 和 SqlSession 并注入到 bean 中,以及将 Mybatis 的异常转换为 Spring 的…...
稳定扩散ControlNet v1.1 权威指南
ControlNet 是一种稳定扩散模型,可让你从参考图像中复制构图或人体姿势。 经验丰富的稳定扩散用户知道生成想要的确切成分有多难。图像有点随机。你所能做的就是玩数字游戏:生成大量图像并选择你喜欢的图片。 借助 ControlNet,稳定扩散用户…...
【golang】结构体及其方法的使用(struct)
函数是独立的程序实体。我们可以声明有名字的函数,也可以声明没名字的函数,还可以把它们当做普通的值传来传去。我们能把具有相同签名的函数抽象成独立的函数类型,以作为一组输入、输出(或者说一类逻辑组件)的代表。 …...
【数据结构】-- 排序算法习题总结
排序 时间复杂度 空间复杂度 稳定性 冒泡排序 O(n^2) 优化后O(n) O(1) 稳定 快速排序 最好O(n*logn) 最坏O(n^2) 最好O(logn) 最坏O(n) 不稳定直接插入排序…...
第十章 CUDA流(stream)实战篇
cuda教程目录 第一章 指针篇 第二章 CUDA原理篇 第三章 CUDA编译器环境配置篇 第四章 kernel函数基础篇 第五章 kernel索引(index)篇 第六章 kenel矩阵计算实战篇 第七章 kenel实战强化篇 第八章 CUDA内存应用与性能优化篇 第九章 CUDA原子(atomic)实战篇 第十章 CUDA流(strea…...
如何进行电脑文件夹分类与整理?
本科电脑用了四年,毕业后发现空间很满,但是真正有用的东西仿佛就一点。好像是在学开发的时候,听到一个老师说,根目录不要放太多文件夹,不然就相当于没有根目录了。刚好研究生有了新的台式电脑,开始有规划的…...
kafka-python 消费者消费不到消息
排除步骤1: 使用group_id”consumer_group_id_001“ 和 auto_offset_reset"earliest" from kafka import KafkaConsumerconsumer KafkaConsumer(bootstrap_servers["dev-kafka01.test.xxx.cloud:9092"],enable_auto_commitTrue, auto_commit…...
穿起“新架构”的舞鞋,跳一支金融数字化转型的华尔兹
华尔兹,是男女两位舞者,通过形体的控制,舞步技巧的发挥,完美配合呈现而出的一种舞蹈形式。华尔兹舞姿,如行云流水、潇洒自如、飘逸优美,素有“舞中皇后”的美称。 在跳华尔兹的时候,如果舞者双…...
SpringBoot 常用注解
随着Spring及Spring Boot的发展,基于Java的配置已经慢慢替代了基于xml的配置形式。本篇文章为大家整理和简介Spring Boot中常用的注解及其功能。 SpringBoot注解 SpringBootApplication:开启Spring Boot自动配置的核心注解,相关等同于Configu…...
k8s deployment创建pod流程图
参考 k8s 创建pod和deployment的流程 - SoulChild随笔记...
C++ 逗号运算符
使用逗号运算符是为了把几个表达式放在一起。 整个逗号表达式的值为系列中最后一个表达式的值。 从本质上讲,逗号的作用是将一系列运算按顺序执行。 表达式1, 表达式2求解过程是:先求解表达式 1,再求解表达式 2。整个逗号表达式的值是表达…...
jdbc集成phoneix hbase
为什么使用jdbc集成 需求简单,只是往phoneix存储数据原本项目已经有mysql的mybatis plus集成,如果采用dataSource方式就需要采用多数据源的方式,造成架构复杂化,使用复杂化,并且修改地方过多。 Qualifier("phoe…...
16.遍历二叉树,线索二叉树
目录 一. 遍历二叉树 (1)三种遍历方式 (2)递归遍历算法 (3)非递归遍历算法 (4)层次遍历算法 二. 基于递归遍历算法的二叉树有关算法 (1)二叉树的建立 …...
电商平台按关键字搜索商品淘宝京东拼多多api接口PHP示例
关键词搜索商品接口的作用是通过调用接口来实现在电商平台中进行商品搜索。具体而言,该接口可以提供以下功能和作用: 商品搜索:用户可以通过输入关键词,在电商平台上进行商品搜索。接口可以根据关键词对商品的名称、描述、标签等…...
胖小酱之恰恰是什么
意思是:指所指的事物截然不同,正好相反。 恰恰相反的近义词:事与愿违、适得其反 一、事与愿违 [ sh yǔ yun wi ] 【解释】:事实与愿望相反。指原来打算做的事没能做到。 【出自】:茅盾《子夜》十六:不…...
豪越科技受邀出席2023中国算力大会
2023年8月17日-8月20日,“算汇银川 数创未来”创新中国行走进银川暨2023中国算力大会在银川中关村创新中心召开。政府领导、行业领袖、专家学者、以及大型科技企业负责人齐聚大会现场,围绕算力基础设施建设、创新应用和产业发展成果等方面开展广泛交流与…...
python脚本——批量将word文件转换成多张图片
前提:有时候需要快速查看word文档的内容是否自己需要的,或者就是单纯需要将word文档转换成一张张图片。 思路:word文档直接生成图片比较蛮烦,可能会引起格式变化,就先将word文档转换成PDF,然后将PDF文档转…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...
