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

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.lryc.cn/news/164431.html

相关文章:

  • 数据库——事务
  • echarts折线图每段显示不同的颜色
  • 设计模式-单例模式(Singleton)
  • 优漫动游 常见的AI视频生成网站的官方网站:
  • Vue中数据可视化关系图展示与关系图分析
  • 【启扬方案】基于启扬安卓屏一体机的医疗手推车解决方案
  • JavaScript实现MD5加密的6种方式
  • 腾讯云和阿里云2核2G服务器租用价格表对比
  • 抖音无需API开发连接Stable Diffusion,实现自动根据评论区的指令生成图像并返回
  • MySQL(三)
  • 汽车级肖特基二极管DSS220-Q 200V 2A
  • maven jetty post 上传长度设置
  • LeetCode 面试题 03.03. 堆盘子
  • Python-函数进阶
  • 实操Hadoop大数据高可用集群搭建(hadoop3.1.3+zookeeper3.5.7+hbase3.1.3+kafka2.12)
  • 如何在 Ubuntu 上安装和使用 Nginx?
  • seatunnel win idea 本地调试
  • 链路追踪Skywalking快速入门
  • 全开源影视APP源码带后台 苍穹影视APP源码 免受权带安装教程
  • Qt+C++自建网页浏览器-Chrome blink最新内核基础上搭建-改进版本
  • 这场科技巨变,有生之年有希望
  • zemax优化功能
  • Centos8关闭IPV6
  • 华为OD七日集训第4期 - 按算法分类,由易到难,循序渐进,玩转OD
  • flutter 抓包工具charles
  • ——二叉树
  • 【linux命令讲解大全】103.Linux目录堆栈命令 dirs 的使用方法和选项详解
  • vue3项目应用font awesome6
  • 【JavaScript】JS语法入门到实战
  • 【Linux】工具Gdb调试轻度使用(C++)