vue+elementUI el-select 自定义搜索逻辑(filter-method)

下拉列表的默认搜索是搜索label显示label,我司要求输入id显示label名称
在这里插入图片描述

<el-form-item label="部门:"><el-select v-model="form.region1" placeholder="请选择部门" filterable clearable:filter-method="dataFilter"><el-option :label="item.name" :value="item.id" v-for="(item, index) in bumen":key="index"></el-option></el-select>
</el-form-item>

首先mounted加载数据 存两份数据bumen 和bumen 1

method:{
bumenList() {JCDeptList().then((res) => {let { Data, ReturnCode } = res;if (ReturnCode == 200) {this.bumen = Datathis.bumen1 = Data}})}
},
mounted(){this.bumenList()
}

使用filter-method方法筛选数据

method:{
dataFilter(val) {this.form.region1 = val //`这一步一定要加上,不然输入框会有问题`!!!!!if (val) {this.bumen = this.bumen1.filter((item) => {if (item.id.includes(val)) {return true}})}else {this.bumen = this.bumen1 //val为空时,还原数组}},
}

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

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

相关文章

PHP对接阿里云虚拟号的实现(号码隐私保护)

fastadmin 封装框架 实现功能&#xff1a;AXN隐私号绑定、解绑&#xff1b; 场景&#xff1a;为店铺手机号开通虚拟号&#xff0c;用户联系店铺展示虚拟号码&#xff1b; 官方开放文档地址&#xff1a;https://help.aliyun.com/document_detail/59655.html?spma2c4g.111742…

9月7日上课内容 redis群集

redis高可用重点回顾 redis的两种持久化方式 rdb 优缺点 缺点 ① 数据完整性不如AOF ② RDB类似于快照&#xff08;完备&#xff09; ③ 在进行备份时会阻塞进程 优点 ① 持久化的速度比较快&#xff08;因为保存的是数据结果&#xff09;&#xff0c;在写入到*.rdb持久化文…

[docker]笔记-存储管理

1、docker数据存储分为非永久性存储和永久性存储。 非永久性存储&#xff1a;容器创建会默认创建非永久性存储&#xff0c;该存储从属于容器&#xff0c;生命周期与容器相同&#xff0c;会随着容器的关闭而消失&#xff08;可理解为内存中数据&#xff0c;会随关机而消失&…

MySQL——笔试测试题

解析&#xff1a; 要查询各科目的最大分数&#xff0c;可以使用如下的SQL语句&#xff1a; SELECT coursename, MAX(score) FROM t_stuscore GROUP BY coursename; 这条SQL语句使用了MAX()聚合函数来获取每个科目的最大分数&#xff0c;并使用GROUP BY子句按照科目进行分组…

保留网络[02/3]:大型语言模型转换器的继任者”

一、说明 在这项工作中&#xff0c;我们提出保留网络&#xff08;RETNET&#xff09;作为基础架构大型语言模型的结构&#xff0c;同时实现训练并行&#xff0c; 推理成本低&#xff0c;性能好。我们从理论上推导出这种联系 复发与关注之间。然后我们提出保留机制 序列建模&…

时间旅行的Bug 奇怪的输入Bug

故事一&#xff1a;时间旅行的Bug 在一个普通的工作日&#xff0c;程序员小明正在开发一个时间旅行的应用程序。这个应用程序可以让用户选择一个特定的日期和时间&#xff0c;然后将用户的意识传送到过去或未来的那个时刻。小明对这个项目非常兴奋&#xff0c;他认为这将是一个…

微信小程序中 vant weapp 使用外部的icon作为图标的步骤

微信小程序中 vant weapp 使用外部的icon作为图标的步骤 1. 在项目中创建静态资源文件夹2. 前往iconfont图标官网&#xff0c;添加图标并拷贝在线链接3. 下载iconfont代码&#xff0c;解压之后拷贝到小程序的目录中4. 修改iconfont.wxss 将本地链接替换为在线链接5. 在项目的ap…

RLAIF:一个不依赖人工的RLHF替代方案

深度学习自然语言处理 原创作者&#xff1a;Winnie LLM可以标记人类偏好数据&#xff0c;用于强化学习吗&#xff1f;尽管之前有一些类似的研究&#xff0c;但从没有人系统地对比RLHF和RLAIF的性能。今天&#xff0c;我们为大家带来一项Google最新的研究&#xff0c;来看看LLM是…

什么是IIFE(Immediately Invoked Function Expression)?它有什么作用?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐IIFE 的基本语法⭐IIFE 的主要作用⭐如何使用 IIFE 来创建私有变量和模块封装⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅…

兵者多诡(HCTF2016)

环境:https://github.com/MartinxMax/CTFer_Zero_one 题目简介 解题过程 登录首页 提交png图片上传抓包&#xff0c;可以看到是向upload文件提交数据 在fp参数中尝试伪协议读取home.php文件 http://127.0.0.1:88/HCTF2016-LFI/home.php?fpphp://filter/readconvert.base64…

FOXBORO FBM232 P0926GW 自动化控制模块

Foxboro FBM232 P0926GW 是 Foxboro&#xff08;福克斯博罗&#xff09;自动化控制系统的一部分&#xff0c;通常用于监测和控制工业过程。以下是关于这种类型的自动化控制模块可能具有的一些常见功能&#xff1a; 数字输入通道&#xff1a; FBM232 P0926GW 控制模块通常具有多…

论文复现--VideoTo3dPoseAndBvh(视频转BVH和3D关键点开源项目)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/HW140701/VideoTo3dPoseAndBvh 所需环境&#xff1a; Windows10&#xff0c;CUDA11.6&#xff0c;conda 4.13.0&#xff1b; 目录 环境搭建conda list配置内容演示生成文件说明 环境搭建 # 创建环境 conda…