基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件

效果图:

组件:MultipleSelect.vue

<template><el-select v-model="selectValues" v-bind="$attrs" v-on="listeners" multiple placeholder="请选择" style="width: 50%" @change="changeSelect"><el-option v-if="options.length" label="全选" value="全选"><el-checkbox v-model="isSelectAll" @click.prevent.native>全选</el-checkbox></el-option><el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]"><el-checkbox v-model="item.isCheck" @click.prevent.native>{{item[props.label]}}</el-checkbox></el-option></el-select>
</template><script>
export default {name: "MultipleSelect",inheritAttrs: false,// 似乎设不设置都可以model: {prop: "initSelectValues",event: "change"},props: {initSelectValues: {type: Array,default: () => []},// 下拉选项options: {type: Array,default: () => []},// 选项键值对props: {type: Object,default: () => {return {label: "label",value: "value"}}}},data() {return {selectValues: [],isSelectAll: false}},watch: {// 监听(全选,全不选以及checkbox是否勾选)selectValues: {handler(arr) {this.options.forEach(item => {if (arr.includes(item[this.props.value])) {item.isCheck = true} else {item.isCheck = false}})if (arr.length === this.options.length) {this.isSelectAll = true} else {this.isSelectAll = false}// 强制更新(checkbox回显)this.$forceUpdate()}}},created() {// 回显this.selectValues = this.initSelectValues},methods: {changeSelect(val) {if (val.includes("全选")) {// 说明已经全选了,所以全不选if (val.length > this.options.length) {this.selectValues = []} else {this.selectValues = this.options.map(item => item[this.props.value])}}this.$emit("change", this.selectValues)}}
}
</script><style>
</style>

使用:index.vue

<template><div id="app"><MultipleSelect v-model="value" :options="options"></MultipleSelect><el-button @click="confirm">确定</el-button></div>
</template><script>
import MultipleSelect from "./components/MultipleSelect"
export default {name: 'App',components: {MultipleSelect},data() {return {value: [],options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}]}},methods: {confirm() {console.log("value", this.value)}}
}
</script><style></style>

多选框多选不换行

 /* 输入框超出隐藏,不换行*/.el-select__tags {flex-wrap: nowrap;overflow: auto;}/* 输入框最大宽度*/.el-select__tags-text {max-width: 90px;}

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

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

相关文章

kylin4.0.3升级问题

话接前文&#xff1a; kylin升级(3.0.1-&#xff1e;kylin-4.0.3)-CSDN博客文章浏览阅读941次&#xff0c;点赞29次&#xff0c;收藏12次。原本的cube太多了&#xff0c;换其他OLAP数据库太麻烦。相比之下&#xff0c;升级是一个很好的选择&#xff08;官网有说明内存降低和构…

玩转“资本腾挪之术”,戴震的能链版图扩至何处?

在当下经济恢复发展缓慢&#xff0c;以及消费市场需求疲软的大环境下&#xff0c;企业融资变得越来越艰难。 但即便如此&#xff0c;仍有个别企业却独得众多资本大鳄青睐&#xff0c;这家企业就是能链集团。据不完全统计&#xff0c;2016年成立至今&#xff0c;能链集团已经完…

JavaWEB学习笔记 2024-1-8 --CSS

上一篇 文章目录 2.CSS2.1CSS的引入方式2.2选择器2.2.1基本选择器2.2.2选择器的权重2.2.3其他选择器2.2.3.1群组选择器2.2.3.2后代选择器和父子选择器2.2.3.3兄弟选择器和相邻选择器2.2.3.4属性选择器2.2.3.5伪类选择器 2.3CSS常见的样式2.3.1CSS盒子模型2.3.1.1margin2.3.1.2b…

一站式搞定文案生成、违规检测、一键分发的全流程

随着社交媒体的不断发展&#xff0c;越来越多的企业开始布局新媒体矩阵&#xff0c;从集团总部到区域门店、个人销售&#xff0c;从全品类到细分垂直类目、从单一平台到多平台&#xff0c;试图让品牌影响力覆盖更广泛群体&#xff0c; 当然&#xff0c;随之而来的&#xff0c;如…

砥砺深耕,历伴童行 ——南阳人人社工2022年度未保项目结项回顾

未成年人的健康成长&#xff0c;关乎国家未来和民族兴旺。2023年&#xff0c;南阳市人人社会工作服务中心在南阳市民政局的指导下&#xff0c;坚持党建引领未成年人保护服务&#xff0c;紧紧围绕“保权益&#xff0c;促发展&#xff0c;育新人”的使命任务&#xff0c;以最有利…

Qt源码分析:Qt程序是怎么运行起来的?

一、从exec()谈起 一个标准的Qt-gui程序&#xff0c;在启动时我们会coding如下几行简洁的代码&#xff1a; #include "widget.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); …

蓝桥杯单片机组备赛——蜂鸣器和继电器的基本控制

文章目录 一、蜂鸣器和继电器电路介绍二、题目与答案2.1 题目2.2 答案2.3 重点函数解析 一、蜂鸣器和继电器电路介绍 可以发现两个电路一端都接着VCC&#xff0c;所以我们只要给另一端接上低电平就可以让蜂鸣器和继电器进行工作。与操作LED类似&#xff0c;只不过换了一个74HC5…

爬虫之使用代理

爬虫—使用代理 1. 为什么使用代理 1.1 让服务器以为不是同一个客户端在请求 1.2 防止我们的真实地址被泄漏&#xff0c;防止被追究 2. 理解使用代理的过程 3. 理解正向代理和反向代理的区别 通过上图可以看出&#xff1a; 正向代理&#xff1a;对于浏览器知道服务器的真实…

vue前端开发自学demo,父子组件之间传递数据demo2

vue前端开发自学demo,父子组件之间传递数据demo2!实际上&#xff0c;组件之间传递数据的&#xff0c;数据类型&#xff0c;是可以多种多样的&#xff0c;下面为大家展示几个常见的数据类型&#xff0c;比如数字类型&#xff0c;数组类型&#xff0c;对象类型。 代码如下所示&a…

Linux Debian12系统gnome桌面环境默认提供截屏截图工具gnome-screenshot

一、简介&#xff1a; 在Debian12中系统gnome桌面环境默认提供一个截图捕获工具screenshot,可以自定义区域截图、屏幕截图、窗口截图和录制视频&#xff0c;截图默认保存在“~/图片/截图”路径下。 可以在应用程序中搜索screenshot,如下图&#xff1a; 也可以在桌面右上角找到…

中国聚α烯烃(PAO)行业市场调研与预测报告(2024版)

内容简介&#xff1a; 合成润滑油是指使用化学方法合成的基础油加入不同的添加剂调和而成的高性能润滑油。合成润滑油在各项性能上都远远优于矿物润滑油&#xff0c;为苛刻工况下工作的设备提供更加可靠的润滑。 常见的合成润滑油主要有聚烯烃类、合成酯类、聚醚类和烷基化芳…

算法进阶——按之字形顺序打印二叉树

题目 给定一个二叉树&#xff0c;返回该二叉树的之字形层序遍历&#xff0c;&#xff08;第一层从左向右&#xff0c;下一层从右向左&#xff0c;一直这样交替&#xff09;。 数据范围&#xff1a;0≤n≤1500,树上每个节点的val满足∣val∣<1500 要求&#xff1a;空间复杂…

物理机搭建hive

一、修改Hadoop配置 修改core-site.xml 配置yarn-site.xml 分发文件&#xff0c;然后重启集群 二、 Hive解压安装 上传文件 添加hive环境便量&#xff0c;source生效 启动高可用集群&#xff0c;启动hive 三、配置mysql元数据库 检查当前系统是否安装过Mysql&#xf…

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(七)

08.什么是模块化&#xff1f; CommonJS 标准 09.ECMAScript 标准 - 默认导出和导入 10.ECMAScript 标准 - 命名导出和导入 11.包的概念 实操&#xff1a; server.js utils/lib/index.js utils/package.json 12.npm - 软件包管理器 13.npm - 安装所有依赖 从别处&#xff08;网…

node 第二十一天 webpack 初见

为什么需要学习&#xff08;了解&#xff09;webpack webpack是前端工程化的基石&#xff0c;webpack又是基于node进行文件打包bundle&#xff0c;所以作为前端起手学习node服务端开发&#xff0c;同时学习webpack是很有必要的。 随着vite的出现&#xff0c;vue这一脉可能也许不…

HarmonyOS应用开发学习笔记 UIAbility组件与UI的数据同步 EventHub、globalThis

1、 HarmoryOS Ability页面的生命周期 2、 Component自定义组件 3、HarmonyOS 应用开发学习笔记 ets组件生命周期 4、HarmonyOS 应用开发学习笔记 ets组件样式定义 Styles装饰器&#xff1a;定义组件重用样式 Extend装饰器&#xff1a;定义扩展组件样式 5、HarmonyOS 应用开发…

TS:.d.ts 文件 和 declare 的作用

1 declare 做外部声明1.1 声明外部类型1.2 声明外部模块1.2.1 解决引入资源模块报错1.2.2 跳过对第三方库的类型检查 1.3 声明外部变量1.4 声明外部命名空间&#xff08;作用域&#xff09; 2 .d.ts 文件做外部声明3 declare global {} 在模块中做外部声明 先说一下我对 .d.ts文…

计算机缺失msvcp140.dll的修复教程,教你快速解决dll问题

“针对计算机系统中出现的msvcp140.dll文件丢失问题&#xff0c;小编将详细阐述一系列有效的解决方法。首先&#xff0c;msvcp140.dll是Microsoft Visual C Redistributable Package中的一个关键动态链接库文件&#xff0c;对于许多应用程序的正常运行至关重要。当系统提示该文…

RS触发器

转自&#xff1a;【基础】RS触发器_两个或非门构成rs触发器-CSDN博客 RS触发器为什么能 “保持上一状态” 触发器就是在常规的门电路的基础上加入了反馈&#xff0c;这样触发器就实现了存储数据的功能。这也是上面章节 “RS触发器实验” 的 RS触发器特征表 中第3条 “保持上一…

线性分解模型(LDM)的扩展方法——分析稀疏数据里的微生物组存在或缺失关联

谷禾健康 生态学家在分析微生物组和感兴趣的协变量(如临床结果或环境因素)之间的关联时&#xff0c;经常以两种方式查看物种分类计数数据。 一种是将计数视为定量的(即作为相对丰度数据进行分析)&#xff1b;另一种是将计数数据离散化&#xff0c;只表明一个分类单元在样本中是…