在element-ui的el-select中，如果存在多个下拉框共用数据，并且动态过滤下拉菜单数据的时候，下拉菜单展开后会出现匹配到数据还显示 ‘无匹配数据’的场景

于 2025-01-06 17:21:51 发布
阅读量260 收藏 1
点赞数
文章标签： 前端 element-ui vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn6107/article/details/144967809
版权

异常场景：有匹配数据但仍会显示无匹配数据。
在这里插入图片描述
遇到这种情况需要用el-select的filter-method自定义搜索方法重写一下搜索的逻辑，具体使用方法如下：
在这里插入图片描述
data数据定义：
在这里插入图片描述
自定义搜索函数具体内容：
在这里插入图片描述

RonnieFeng
关注
vue使用el-select下拉框匹配不到值的优化方案，el-select显示，当选择框的选项无法与选择框的value值匹配时，不显示value值的处理办法
King Saj
01-03 5564
新建表单数据，下拉框选项一般从接口获取的数据列表，比如后期某个数据关停了，这条数据就会被删除，导致我们取不到这条数据。就会出现 el-select下拉框匹配不到值的情况。所以我们要处理这种情况的。
Vue ElementUI select多选互斥
weixin_42679187的博客
04-24 3593
<el-form-item label="运营商"> <el-select v-model="values" multiple placeholder="请选择" @change="selectedChange"> <el-option v-for="item in selects" :key="item.value" :label="item.la...
element-ui关于el-select的下拉框选项中出现“无匹配数据”问题分析及解决办法
dongkaiyong的博客
10-01 3万+
最近的项目前端用到vue+elementui框架，在使用过程中遇到很多问题，在后几篇文章中会一一列出，有解决的，有没解决的。 先说关于select下拉框的问题：（项目原因无法截图） 具体现象是在某个下拉框下面会在显示完所有的下拉选项后出现一个额外的下拉框，里面显示“无匹配数据”。 先说一下问题原因：在你选中一个下拉选项后，由于功能需要更新了下拉框的option对应的值，并且你的select的v...
前端select选择框回显数据不匹配
weixin_52682014的博客
02-04 1538
在使用element的select选择框进行数据回显时，显示的数据与label值不一致该怎么解决
el-select显示，当选择框的选项无法与选择框的value值匹配时，不想显示value值的处理办法
qq_42185724的博客
01-22 6336
写在前面，当出现这种情况的时候，选择框option肯定是从接口获取的。 举例一个表单回显时的情况，当点击编辑按钮，表单打开。由于没有想匹配的选项，选择框自然显示了所获取的value值。那么我们处理这个情况的代码就得放在这个地方，写在点击编辑按钮的方法中。下面我先贴出代码再稍微讲下逻辑。 this.addForm = { ...row }; let i = true; //声明一个变量，用做判断 //解决存储介质数组无对应匹配选问题，匹配不成功选择框显示为空
el-select传入数据显示问题，组件显示与传入数据无法匹配的问题
qq_43681092的博客
02-19 1816
传入数据显示
详解为element-ui的Select和Cascader添加弹层底部操作按钮
12-28
但是很遗憾element-ui没有给我们提供这个插槽，我们想实现这个功能只能重写组件或者等官方更新吗，答案当然是否定的！ 花了一点时间通过一个函数实现这个功能，支持el-select和el-cascader,效果点击预览 其实...
element-plus table 嵌套 select
最新发布
03-26
### 如何在 Element Plus 的 Table 组件中嵌套 Select 下拉框 在 `element-plus` 中实现表格内嵌套下拉选择框的功能，可以借鉴 `element-ui` 的实现方式并进行适配。以下是具体的实现方法： #### 实现方案 通过...
【修改源码】解决el-select值不匹配导致回显id、只能搜索label无法搜索value的问题
山有木兮木有枝 心悦君兮君不知
12-13 1172
【修改源码】解决el-select值不匹配导致回显id、只能搜索label无法搜索value的问题
使用elementUI的select，当没有匹配的时候默认显示value值；
Lee_yuki
10-18 3255
使用elementUI的select，当没有匹配的时候默认显示value值； 问题：多处页面用到了相同的选择，为避免多次请求接口，选项列表存到了localstrage中，对选项增删改时，更新localstrage。但是有些时候后端接口返回的value值，已经删除了，localstrage中无法匹配到对应的label，回显显示value值。 解决：在公用表单组件中，如果type为select，循环localstrage的数组，如果没有匹配到的，设置该表单值为空 ```javascript this.item
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
vue-element 动态给select下拉框赋值却不匹配的问题
Mr_ZhouR的博客
10-14 3353
做项目的时候，改前人bug，遇到了个下拉框赋值问题，处理完记录一下 下拉框赋值方式 <el-form-item label="请选择税率" prop="rate"> <el-select v-model="selectedRate" placeholder="请选择税率" @change="handleChangeRate" class="input-text"> <el-option v-for="dict in rateDict" .
关于vue2中使用elementui的select组件时，在遇到选项列表更新时，弹框显示最新选项+“无匹配数据”的问题的解决办法
jjking1994的博客
06-14 418
通过网上查到的资料查到这是因为select存在已选值的时候，通过接口更新了选项列表，而select的v-model绑定的值并没有更新，就会出现以上描述的问题。即el-select对应的v-model在el-option中找不到对应的值，就会出现上述错误。场景：使用select组件，选项通过接口动态返回，在触发选项展示的时候实时调取接口返回最新的选项，并且当前select组件v-model（对应代码中的selectValue）对应的数据已经存在默认值（或赋值）环境：vue2 + elementui。
element-ui关于el-select的下拉框选项匹配不到数据
weixin_47065193的博客
04-25 4222
// An highlighted block <div class="mrleft10 width60"> <el-select v-model="itemp.id" class="m-2" :filterable="true" @change="getSelect(index,itemp)"
vue使用el-select下拉框匹配不到值的优化方案
铁锤妹妹的博客
09-15 5906
一. 问题描述 点击编辑弹窗里从上面列表行数据里取到的乙方名称变成了乙方id15，产生的原因是因为弹窗里的甲乙方列表是从接口请求来的，比如后期某个乙方公司关停了，这条数据就会被删除，导致我们取不到这条数据 查看接口返回的列表，发现少了行数据中的乙方这条数据 二. 解决思路 findIndex() 返回值判断编辑当前行数据取到的id和甲乙方列表里的id是否有一样的； 如果有相同id的话，返回第一个符合条件的数组成员位置，都不符合条件，则返回 -1 如果返回数组成员位置 < 0 的话，从列表行数
vue2 element-ui选择器多选搜索时过滤失效
gpchjyo的博客
11-08 1238
在vue2中使用element-ui的el-select选择器时发现多选和搜索功能同时启用的时候会出现过滤了的结果被重置的情况，通过绑定input事件修复此问题
el-select远程搜索，查询条件为空，没有搜索到数据时，展示“无数据”
weixin_45549481的博客
08-12 1252
查询条件没有值，远程接口没有数据时，手动给组件赋值一个空格字符串，使其走到「查询条件有值，远程接口没有数据时」的判断，也就展示了“无数据”现状：1、查询条件没有值，远程接口没有数据时，不展示“无数据”；2、查询条件有值，远程接口没有数据时，可以展示“无数据”；
el-select使用方法及遇到数据回显的坑
weixin_33958585的博客
03-25 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
解决element ui select下拉框不回显数据问题
热门推荐
wangyuanjun008的博客
01-24 3万+
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值