当前位置: 首页 > news >正文

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,并在项目中引入它们。

相关文章:

vue el-select多选封装及使用

使用了Element UI库中的el-select和el-option组件来构建多选下拉框。同时&#xff0c;也包含了一个el-input组件用于过滤搜索选择项&#xff0c;以及el-checkbox-group和el-checkbox组件用于显示多选项。 创建组件index.vue (src/common-ui/selectMultiple/index.vue) <tem…...

大模型上下文学习(ICL)训练和推理两个阶段31篇论文

大模型都火了这么久了&#xff0c;想必大家对LLM的上下文学习&#xff08;In-Context Learning&#xff09;能力都不陌生吧&#xff1f; 以防有的同学不太了解&#xff0c;今天我就来简单讲讲。 上下文学习&#xff08;ICL&#xff09;是一种依赖于大型语言模型的学习任务方式…...

WordPress(安装比子主题文件)zibll-7.5.1

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、新建网站二、配置ssl三.配置伪静态四.上传文件五.添加本地访问前言 提示:这里可以添加本文要记录的大概内容: 首先,我们要先理解什么是授权原理。 原理就是我们大家运营网站,点击授权…...

蓝桥杯 动态规划

01 数字三角形 #include<bits/stdc.h> using namespace std; const int N105; using lllong long; ll a[N][N],dp[N][N]; int main(){int n;cin>>n;for(int i1;i<n;i){for(int j1;j<i;j){cin>>a[i][j];}}for(int i5;i>1;i--){for(int j1;j<i;j){…...

【图论】重庆大学图论与应用课程期末复习资料2-各章考点(计算部分)(私人复习资料)

图论各章考点 二、树1、避圈法&#xff08;克鲁斯克尔算法&#xff09;2、破圈法3、Prim算法 四、路径算法1、Dijkstra算法2、Floyd算法 五、匹配1、匈牙利算法&#xff08;最大权理想匹配&#xff08;最小权权值取反&#xff09;&#xff09; 六、行遍性问题1、Fleury算法&…...

整数和浮点数在内存中的存储​(大小端详解)

目录 一、整数在内存中的存储 二、大小端字节序和字节序判断 2.1为什么有大小端?​ 2.2请简述大端字节序和小端字节序的概念&#xff0c;设计一个小程序来判断当前机器的字节序。&#xff08;10分&#xff09;-百度笔试题 方法一&#xff08;char*强制类型转换&#xff09…...

SpringBoot 集成 ChatGPT,实战附源码

1 前言 在本文中&#xff0c;我们将探索在 Spring Boot 应用程序中调用 OpenAI ChatGPT API 的过程。我们的目标是开发一个 Spring Boot 应用程序&#xff0c;能够利用 OpenAI ChatGPT API 生成对给定提示的响应。 您可能熟悉 ChatGPT 中的术语“提示”。在 ChatGPT 或类似语…...

数据结构——希尔排序(详解)

呀哈喽&#xff0c;我是结衣 不知不觉&#xff0c;我们的数据结构之路已经来到了&#xff0c;排序这个新的领域&#xff0c;虽然你会说我们还学过冒泡排序。但是冒泡排序的性能不高&#xff0c;今天我们要学习的希尔排序可就比冒泡快的多了。 希尔排序 希尔排序的前身是插入排…...

C++ day53 最长公共子序列 不相交的线 最大子序和

题目1&#xff1a;1143 最长公共子序列 题目链接&#xff1a;最长公共子序列 对题目的理解 返回两个字符串的最长公共子序列的长度&#xff0c;如果不存在公共子序列&#xff0c;返回0&#xff0c;注意返回的是最长公共子序列&#xff0c;与前一天的最后一道题不同的是子序…...

ubuntu中删除镜像和容器、ubuntu20.04配置静态ip

1 删除镜像 # 短id sudo docker rmi 镜像id # 完整id sudo docker rmi 镜像id# 镜像名【REPOSITORY:TAG】 sudo docker rmi redis:latest2 删除容器 # 删除某个具体容器 sudo docker rm 容器id# 删除Exited状态/未运行的容器&#xff0c;三种命令均可 sudo docker rm docker …...

华为手环 8 五款免费表盘已上线,请注意查收

华为手环 8&#xff0c;作为一款集时尚与实用于一体的智能手环&#xff0c;不仅具备强大的功能&#xff0c;还经常更新的表盘样式&#xff0c;让用户掌控时间与健康的同时&#xff0c;也能展现自己的时尚品味。这不&#xff0c;12 月官方免费表盘又上新了&#xff0c;推出了五款…...

JOSEF约瑟 同步检查继电器DT-13/200 100V柜内安装,板前接线

系列型号 DT-13/200同步检查继电器; DT-13/160同步检查继电器; DT-13/130同步检查继电器; DT-13/120同步检查继电器; DT-13/90同步检查继电器; DT-13/254同步检查继电器; 同步检查继电器DT-13/200 100V柜内板前接线 一、用途 DT-13型同步检查继电器用于两端供电线路的…...

龙迅#LT8311X3 USB中继器应用描述!

1. 概述 LT8311X3是一款USB 2.0高速信号中继器&#xff0c;用于补偿ISI引起的高速信号衰减。通过外部下拉电阻器选择的编程补偿增益有助于提高 USB 2.0 高速信号质量并通过 CTS 测试。 2. 特点 • 兼容 USB 2.0、OTG 2.0 和 BC 1.2• 支持 HS、FS、LS 信令 • 自动检测和补偿 U…...

eclipse jee中 如何建立动态网页及服务的设置问题

第一次打开eclipse 时&#xff0c;设置工作区时&#xff0c;一定是空目录 进入后 File-----NEW------Dynamic Web Project 填 项目名&#xff0c;不要有大写 m1 next next Generate前面打对勾 finish 第一大步&#xff1a; window----Preferences type filter text 处填 :Serve…...

一张网页截图,AI帮你写前端代码,前端窃喜,终于不用干体力活了

简介 众所周知&#xff0c;作为一个前端开发来说&#xff0c;尤其是比较偏营销和页面频繁改版的项目&#xff0c;大部分的时间都在”套模板“&#xff0c;根本没有精力学习前端技术&#xff0c;那么这个项目可谓是让前端的小伙伴们看到了一丝丝的曙光。将屏幕截图转换为代码&a…...

处理k8s中创建ingress失败

创建ingress&#xff1a; 如果在创建过程中出错了&#xff1a; 处理方法就是&#xff1a; kubectl get ValidatingWebhookConfiguration kubectl delete -A ValidatingWebhookConfiguration ingress-nginx-admission 然后再次创建&#xff0c;发现可以&#xff1a;...

Redis高可用集群架构

高可用集群架构 哨兵模式缺点 主从切换阶段&#xff0c; redis服务不可用&#xff0c;高可用不太友好只有单个主节点对外服务&#xff0c;不能支持高并发单节点如果设置内存过大&#xff0c;导致持久化文件很大&#xff0c;影响数据恢复&#xff0c;主从同步性能 高可用集群…...

JAVA常见问题解答:解决Java 11新特性兼容性问题的六个步骤

引言&#xff1a; 随着技术的不断发展&#xff0c;Java作为一种被广泛使用的编程语言&#xff0c;也在不断更新和改进。Java 11作为Java的最新版本&#xff0c;带来了许多新的特性和改进。然而&#xff0c;对于一些老旧的Java应用程序来说&#xff0c;升级到Java 11可能会带来一…...

【C语言】深入理解指针(1)

目录 前言 &#xff08;一&#xff09;内存与地址 从实际生活出发 地址 内存 内存与地址关系密切 &#xff08;二&#xff09;指针变量 指针变量与取地址操作符 指针变量与解引用操作符 指针的大小 指针的运算 指针 - 整数 指针-指针 指针的关系运算 指针的类型的…...

MySQL的系统信息函数

系统信息函数让你更好的使用MySQL数据库 1、version()函数 查看MySQL系统版本信息号 select version();2、connection_id()函数 查看当前登入用户的连接次数 直接调用CONNECTION_ID()函数--不需任何参数--就可以看到当下连接MySQL服务器的连接次数&#xff0c;不同时间段该…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...