el-select利用自定义filter-method筛选数据

使用filter-method解决filterable属性限制下的模糊搜索问题,
最新推荐文章于 2025-04-15 20:35:16 发布
原创 最新推荐文章于 2025-04-15 20:35:16 发布 · 2.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

本文介绍了在原有filterable属性无法支持拼接后模糊搜索的情况下，如何通过引入filter-method来实现更灵活的搜索功能，提供了相关代码示例。

实现如图：

根据原本filterable属性无法实现拼接后的模糊搜索 所以需要借助filter-method

代码：

Element-UI el-select下拉框自定义过滤选项全选
一碗清深的博客
05-07 1781
本文将介绍添加 el-button 的方式实现下拉框自定义过滤选项全选，当然也可以添加 el-option、el-checkbox 等等来实现。
自定义条件筛选组件
少油少盐不要辣
06-13 679
自定义筛选组件
element-UI中监听el-select下拉框可搜索时候，filter-method自定义搜索方法
qq_44552416的博客
05-09 1万+
el-select中加入filterable属性，就开启了搜索功能，然后我们用:filter-method="dataFilter"可以自定义一个搜索筛选条件，在这里来写我们自己的逻辑代码。监听输入框里面输入文字后，自动调用后台接口获取下拉框的数据 <template> <section class="p-10"> <el-select clearable v-model="value" placeholder="请选择" filterable :filter-m
vue+element-UI中el-select下拉框搜索 :filter-method自定义事件
猫巷的博客
04-21 3383
1.添加 :filter-method=“printername” 自定义搜索事件 <el-form-item label="打印机" prop="printerid"> <el-select v-model="cateinfo.printerid" placeholder="请选择打印机" clearable style="width:150px;" filterable :filter-method="printername"> <el-option v-for="
关于vxe-select得filter-method 自定义方法得使用，忽略大小写匹配
最新发布
Sunny_lxm的博客
04-15 490
vxe-select使用模糊匹配时，filter-method自定义匹配方法，模糊忽略大小写进行匹配数据。
el-select 自定义搜索方法:filter-method 多种方式搜索结果
Kyiiiii的博客
06-08 5408
el-select filter-method 自定义搜索方法
vue+elementUI el-select 自定义搜索逻辑（filter-method）
sumimg的博客
09-05 5283
下拉列表的默认搜索是搜索label显示label,我司要求输入id显示label名称。使用filter-method方法筛选数据。首先mounted加载数据。
el-select下拉框自定义
01-07
对于更复杂的筛选逻辑，则需利用 `filter-method` 属性来指定一个函数作为过滤器[^1]。 ```javascript methods: { customFilterMethod(value, item) { // 实现自定义的匹配算法 return item.label.toLowerCase()...
vue3+elementplus+虚拟树el-tree-v2+多条件筛选过滤filter-method
KKKKKKD的博客
11-11 1350
【代码】vue3+elementplus+虚拟树el-tree-v2+多条件筛选过滤filter-method。
el-select远程查询大数据量分段加载
wusq的博客
09-02 3138
el-select远程查询大数据量分段加载 1.问题： 最近使用elementUI的el-select组件的远程查询功能，发现在大量数据（1w条以上）的时候出现页面卡死的情况，经过排查，产生问题的原因是前端渲染造成的。 2.解决思路 1.在查找解决方案的时候看到一个解决办法是加载前50条，效果是这样的： 2.按照这个思路，想到了 ...
el-select下拉框，备选项自定义，filter-method自定义，可按学号和姓名搜索。
qq_66390045的博客
01-18 3756
el-select下拉框，备选项自定义，filter-method自定义，可按学号和姓名搜索。
element-UI中el-select下拉框可搜索时候，filter-method自定义搜索方法
weixin_30675967的博客
02-19 5434
　　使用element-UI框架的使用，我们经常使用el-select下拉框，很多时候还需要使用可搜索的下拉框，然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法，但是却没有详细介绍怎么用，这里简单介绍一下用法，希望对大家有点帮助 在el-select中加入filterable属性，就开启了搜索功能，然后我们用:filter-method="data...
el-select自定义筛选方法filter-method，选项与输入值逐字对比进行筛选
yqq1120的博客
02-18 1万+
添加filterable属性即可筛选，默认筛选方式是将 选项与输入值整个对比 :filter-method="dataFilter"可自定义筛选方式 <el-select v-model="value" filterable :filter-method="dataFilter" > <el-option .
vue elementUI el-select中 filter-method自定义搜索方法
qq_38909255的博客
12-24 2万+
vue elementUI filter-method自定义搜索方法
el-select filter-method 自定义搜索方法 检索关键词问题
o_neboy的博客
08-04 1351
通过代码可知，使用默认检索方法，会调取broadcast方法，触发el-option的queryChange方法来过滤命中的项，并通过v-show隐藏非命中项。查看源码后发现，自带默认检索方法是使用的v-show隐藏，并没有删除没有命中的元素DOM。若使用自带检索方法，可调取broadcast。
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
热门推荐
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
vue el-select自定义搜索选择案例
不会写代码的前端
01-18 1342
效果如下：<el-selectplaceholder="请选择"clearablefilterable<el-option// 自定义搜索// 这里是用的value选项筛选，默认是label});},
element-UI中el-select下拉框，filter-method自定义，可按拼音名称搜索
chuxuan0215的博客
08-12 1万+
<el-select v-model="item.memo" placeholder="" clearable allow-create filterable :filter-method="dataFilter" style="width: 100px"> <el-option v-for="it in channelList" :key="it.rid" :label="it.prop_val" :value="it.rid" /> </el-select>.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值