vue el-select多选封装及使用

在这里插入图片描述

使用了Element UI库中的el-select和el-option组件来构建多选下拉框。同时,也包含了一个el-input组件用于过滤搜索选择项,以及el-checkbox-group和el-checkbox组件用于显示多选项。

创建组件index.vue (src/common-ui/selectMultiple/index.vue)
<template><el-selectref="select"v-model="hValue"multiplecollapse-tags:clearable="clearable":disabled="disabled":placeholder="placeholder":popper-class="'select-default no-empty'":key="poperKeyValue":value-key="valueKey"@blur="handleBlur"@change="handleChange"@clear="handleClear"@focus="handleFocus"@remove-tag="handleRemoveTag"@visible-change="handleVisibleChange"><el-inputclass="filter-input"v-model.trim="hFilterVal"v-if="filterable":class="selectInfo.options.length == 0 ? 'filter-input-mb' : ''"></el-input><el-checkbox-group v-model="hValue"><el-optionv-for="(item, index) in selectInfo.options":key="index":label="selectInfo.prop && selectInfo.prop.label? item[selectInfo.prop.label]: item.name":disabled="item.disabled":value="selectInfo.prop && selectInfo.prop.value? item[selectInfo.prop.value]: item.id"><el-checkboxstyle="pointer-events: none":label="selectInfo.prop && selectInfo.prop.value? item[selectInfo.prop.value]: item.id">{{selectInfo.prop && selectInfo.prop.label? item[selectInfo.prop.label]: item.name}}</el-checkbox></el-option></el-checkbox-group></el-select>
</template><script>export default {name: "HSelectMul",props: {placeholder: String,selectInfo: {type: Object,default() {return {align: "left",options: [],filterOptions: [],prop:{label:'name',value:'id'}};}},filterVal:{type:String,value:''},clearable: {type: Boolean,default: true},disabled: {type: Boolean,default: false},filterable: {type: Boolean,default: true},value: {type: [String, Number, Array, Boolean],required: true},valueKey: String,keyValue: {type: String,default: "select-single"}},data() {return {poperKeyValue: ""};},computed: {hValue: {get() {let value = [];if (this.value instanceof Array) {this.value.forEach(key => {if (this.checkValueExisting(key)) {value.push(key);}});}return value;},set(value) {this.$emit("input", value);}},hFilterVal: {get() {return this.filterVal;},set(value) {this.$emit("input-search", value);}},},watch: {keyValue(val) {this.poperKeyValue = val;}},methods: {checkValueExisting(value) {let key = this.selectInfo.prop&&this.selectInfo.prop.value?this.selectInfo.prop.value:'id'if(this.filterable) {if (this.selectInfo.filterOptions instanceof Array) {let index = this.selectInfo.filterOptions.findIndex(item => item[key] === value,this);return index > -1;}} else {if (this.selectInfo.options instanceof Array) {let index = this.selectInfo.options.findIndex(item => item[key] === value,this);return index > -1;}}return false;},handleBlur(event) {this.$emit("blur", event);},handleChange(value) {this.$emit("change", value);},handleClear() {this.$emit("clear");},handleFocus(event) {this.$emit("focus", event);},handleRemoveTag(tag) {this.$emit("remove-tag", tag);},handleVisibleChange(visible) {this.$emit("visible-change", visible);}}};
</script><style lang="scss" scoped></style>
页面引入
  • 在需要使用selectMultiple组件的地方,通过import语句组件注册并使用

<template><div><HSelectMultiple:select-info="selectInfo"v-model="selectedValue":filter-val="filterVal"@input-search="dropDownSearchTop"@change="changeSelect"></HSelectMultiple></div>
</template>
<script>import HSelectMultiplefrom '@/common-ui/selectMultiple/index'export default {components: {HSelectMultiplefrom },data() {return {filterVal: '',dataSource: [],selectedValue: '',selectInfo: {align: "left",options: [],filterOptions: [],prop: {label: 'name',value: 'id'}},}},methods: {changeSelect(val, field, parentField, info) {this.selectInfo.chooseSelectList = [];for (let i = 0; i < this.selectInfo.filterOptions.length; i++) {for (let j = 0; j < val.length; j++) {let value = this.selectInfo.prop && this.selectInfo.prop.value ? this.selectInfo.prop.value : "id";if (val[j] === this.selectInfo.filterOptions[i][value]) {this.selectInfo.chooseSelectList.push(this.selectInfo.filterOptions[i]);}}}console.log(val, '选择的值')},dropDownSearchTop(val) {this.filterVal = this.selectInfo.filterVal;if (this.selectInfo.filterVal === "") {this.selectInfo.options = JSON.parse(JSON.stringify(this.selectInfo.filterOptions));return;}let list = [];if (this.selectInfo.chooseSelectList.length > 0) {list = this.selectInfo.filterOptions.filter(item => {let value = ithis.selectInfonfo.prop && this.selectInfo.prop.value ? this.selectInfo.prop.value : "id";return this.selectInfo.chooseSelectList.every(el => el[value] != item[value]);});} else {list = JSON.parse(JSON.stringify(this.selectInfo.filterOptions));}this.selectInfo.options = this.selectInfo.chooseSelectList.concat(list.filter(item => {let name = this.selectInfo.prop && this.selectInfo.prop.label ? this.selectInfo.prop.label : "name";return item[name].includes(this.selectInfo.filterVal);}));},}// ...}
</script>

确保你已经安装了Vue.js和Element UI,并在项目中引入它们。

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

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

相关文章

生成式 AI 应用落地小结:高估的模型能力,低估的工程实施

虽然 ChatGPT 已经诞生了一周年&#xff0c;但是大量的人依旧对于生成式 AI 没有足够的认识。在研发领域&#xff0c;Thoughtworks 一直在与不同的大型企业合作&#xff0c;保持开放性的探索。 在我负责的 Thoughtworks 开源社区&#xff0c;我们与外部的几家大型企业一起探索和…

OpenCV-python:图像像素类型转换与归一化

目录 1.图像像素类型转换 2. 图像像素转换适用情形 3.图像归一化 4.归一化方法支持 5.归一化函数 6.知识笔记 1.图像像素类型转换 图像像素类型转换是指将图像的像素值从一种类型转换为另一种类型。常见的像素类型包括无符号整数类型&#xff08;如8位无符号整数、16位无符…

leetCode 37.解数独 + 回溯算法 + 图解

编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 数独部分空…

06_单元测试与反射

单元测试 什么是单元测试 就是针对最小的功能单位&#xff08;方法&#xff09;&#xff0c;编写测试代码对其进行正确性测试Junit 单元测试框架&#xff1a;可以用来对方法进行测试&#xff0c;它是第三方公司开源出来的&#xff08;IDEA 以及集成了此框架&#xff09; 注解…

c语言指针详解(上)

目录 一、指针的基本概念和用法 二、指针运算 2.1 指针的自增和自减运算 2.2 指针的自增和自减运算 三、数组和指针 四、指针和函数 4.1 在函数中使用指针作为参数和返回值 4.1.1 使用指针作为函数参数 4.1.2 使用指针作为函数返回值 4.2 指针参数的传值和传引用特性 4.2.1 指针…

SIT75176B:3.0~5.5V 供电,32 节点,10Mbps 半双工 RS485/RS422 收发器

SIT75176B 是一款 3.0V~5.5V 电源供电、总线端口 ESD 保护能力 HBM 达到 15kV 以上、总 线耐压范围达到 15V 、半双工、低功耗&#xff0c;功能完全满足 TIA/EIA-485 标准要求的 RS-485 收发器&#xff0c; 最多允许 32 个节点同时连接到总线。 SIT75176B 包…

嵌入式软开 23秋招时间线 以及一些没用的记录碎碎念

0711 百度 嵌入式深度学习研发工程 0808 简历共享[ ] 0717 西安紫光国芯 二院二十三所 西安咸阳 中兵202 0718 字节 海信 乐鑫 燧原科技 建立挂 格力 投的晚 没消息 兆易创新 0801 y一面 0807 人才库 联想 提前批做过测评&#xff0c;没笔试没感谢信 科大讯飞 非凡计划寄…

使用 async/await 是必须避免的陷阱

使用 async/await 是必须避免的陷阱 如果我们使用过 nodejs&#xff0c;那么我们可能已经在 javaSoript 中使用了异步操作。异步任务是一个独立于 JavaSoript 引擎的主线程执行的操作。从本质上讲&#xff0c;这就是应用程序功能没有阻塞的 UI 的原因。 nodejs 的单线程性质&a…

DeepStream系列之rtmpsink功能,rtsp转rtmp,opencv读取rtsp图像处理后推流rtmp

了解到一个更好的流媒体开源项目&#xff0c;是中国人写的&#xff0c;项目地址 https://github.com/ossrs/srs&#xff0c;有兴趣的可以尝试下&#xff0c;实时性更快 DeepStream系列之rtmpsink功能 实时性没要求&#xff0c;可以用下面的opencv opencv读取rtsp图像处理后推流…

如何快速看懂市场行情?

一、看大盘指数 咱们平时所说的大盘其实指的就是上证指数&#xff0c;它是整个市场的晴雨表。大盘涨了&#xff0c;个股跟着上涨的概率就大&#xff0c;大盘跌了&#xff0c;个股被拖累下跌的概率也大。所以&#xff0c;要想在股市中尝到甜头&#xff0c;大盘分析是少不了滴&am…

python socket编程7 - 使用PyQt6 开发UI界面新增实现UDP server和client单机通讯的例子

在第五篇中&#xff0c;简单实现了命令行下的 TCP/UDP server和client的单机通讯。 在第六篇中&#xff0c;实现了PyQt6开发界面&#xff0c;TCP协议实现的单机server和client的通讯功能。 这一篇&#xff0c;在第六篇的基础上&#xff0c;增加了UDP server和client的单机通讯功…

【在英伟达nvidia的jetson-orin-nx上使用调试摄像头-同时开启多个摄像头-基础测试(2)】

【在英伟达nvidia的jetson-orin-nx上使用调试摄像头-同时开启多个摄像头-USB摄像头与Camera Conn.#0/#1接口-基础测试&#xff08;2&#xff09;】 1、概述2、实验环境3、 先前确认&#xff08;1&#xff09;USB摄像头&#xff0c;先确认可以单独打开&#xff08;2&#xff09;…

灯塔ARL-NPoC全面教程

灯塔ARL-NPoC全面教程 1.ARL-NPoC2.安装3.参数解析4.ARL-NPoC编写指南标准POC模板`__init()__`verifyexploit_cmd5.将指纹同步到远程Web服务器1.ARL-NPoC 最新版的arl增加了poc编写与探测的功能,ARL-NPoC是一个集漏洞验证和任务运行的一个框架 2.安装 ARL-NPoC下载地址 下载…

Leetcode题库(数据库合集)_ 难度:困难

目录 难度&#xff1a;困难1. 部门工资前三高的所有员工2. 行程和用户3. 体育馆的人流量4. 员工薪水的中位数5. 同一天的第一个电话和最后一个电话6. 查询员工的累计薪水7. 给定数字的频率查询中位数8. 学生地理信息报告9. Hopper 公司查询 ①10. 职员招聘人数11. 职员招聘人数…

MPC模型预测控制理论与实践

一、基本概念 最有控制的动机是在约束条件下达到最优的系统表现。 模型预测控制&#xff08;MPC&#xff0c;Model Predictive Control&#xff09;是通过模型来预测系统在某一未来时间段内的表现来进行优化控制&#xff0c;多用于数位控制&#xff0c;通常用离散型状态空间表…

我的计算机之旅:为何选择这个领域?

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

python 堆与栈

【一】堆与栈 【 1 】简介 栈&#xff08;stack&#xff09;&#xff0c;有些地方称为堆栈&#xff0c;是一种容器&#xff0c;可存入数据元素、访问元素、删除元素&#xff0c;它的特点在于只能允许在容器的一端&#xff08;称为栈顶端指标&#xff0c;英语&#xff1a;top&a…

企业微信SCRM助力,让运营效率翻倍!

如今&#xff0c;越来越多的企业选择通过企业微信进行营销&#xff0c;将客户引入企业微信并沉淀到社群中进行精细化运营。相较于个人微信&#xff0c;企业微信的功能更加丰富&#xff0c;更适合企业进行私域留存。 然而&#xff0c;企业微信自带的功能往往只能满足企业的基本…

CSS中常用的4种长度单位

在现实生活中&#xff0c;我们知道很多的长度单位&#xff0c;例如米&#xff0c;厘米&#xff0c;寸&#xff0c;尺等等&#xff0c;在css的世界中&#xff0c;也有很多的长度单位 以下是css中常用的四种常用的长度单位 1&#xff0c;像素 px - 像素是我们在网页中使用的最…

IPoIB在国产并行系统上的实现与优化

目录 1 国产异构众核系统 2 相关工作 3 IPoIB在国产并行系统上的实现 3.1 IPoIB协议原理