element-ui关于el-select的下拉框选项中出现“无匹配数据”问题分析及解决办法

最新推荐文章于 2025-10-09 10:09:08 发布

原创最新推荐文章于 2025-10-09 10:09:08 发布 · 3.3w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#el-select #element-ui #无匹配数据

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

element-ui

1 篇文章

订阅专栏

本文探讨了在Vue+ElementUI框架中遇到的select组件显示问题。当更新下拉选项后，若未同步更新v-model绑定值，则会出现额外的“无匹配数据”下拉框。文章提供了详细的解决思路。

最近的项目前端用到vue+elementui框架，在使用过程中遇到很多问题，在后几篇文章中会一一列出，有解决的，有没解决的。

先说关于select下拉框的问题：（项目原因无法截图）具体现象是在某个下拉框下面会在显示完所有的下拉选项后出现一个额外的下拉框，里面显示“无匹配数据”。

先说一下问题原因：在你选中一个下拉选项后，由于功能需要更新了下拉框的option对应的值，并且你的select的v-model绑定的值并没有更新，就会出现以上描述的问题。即你el-select对应的v-model在el-option中找不到对应的值，就会出现上述错误。

解决方案：在每次更新option时，清空select v-model绑定的值

15 条评论

回忆是昨天里的海 2024.01.03
确实清除了v-module可以使用

mirkmf110 2023.08.29
看了源码，主要是因为开启filterable后重新打开后filteredOptionsCount变成0的原因。下面是修复的方法，希望可以让你们解决。在@focus的方法里面加上下面的语句 [code=javascript] let ref = this.$refs.searchSelection if(!ref){ return } if(!ref.options){ return } let optionCount = ref.options.length let filteredOptionsCount = ref.filteredOptionsCount if (optionCount > 0 && filteredOptionsCount === 0) { ref.filteredOptionsCount = optionCount.length ref.query = "" } [/code]
- qq_45802078回复mirkmf110 2024.03.27
  厉害

wade toms 2020.02.23
后台是给前台什么类型的数据呢？是List<String>？还是List<User>?或是其他什么类型呢
- 出现bug问题不大回复wade toms 2020.02.24
  [reply]ww1007671604[/reply]List<User> user{String value; String label},实体类列表，至少包含value和label两个属性。

五岁鸭? 2019.10.14
你好，遇到了同样的问题，我想问下更新option时清空v-model,具体是哪里
- peibotao回复**之火 2022.03.23
  赋值放到nextTick中试试
- L一个小白回复**之火 2021.11.15
  请问如何解决的
- **之火回复五岁鸭? 2020.03.08
  [reply]gm0125[/reply]关键是数据类型一致！
- **之火回复出现bug问题不大 2020.03.08
  [reply]dongkaiyong[/reply]关键是数据类型一致！
- **之火回复出现bug问题不大 2020.03.08
  [reply]dongkaiyong[/reply]其实我遇到的问题也是这样，但是按博主的方法清空是解决不了实际问题的，为什么呢？后端返回初始化有默认值id，但这个值在option中没有，导致匹配不上label值，所以显示id值，这是不希望看到的，清空有什么用呢，还不得重新赋上？赋上还是匹配不上呀，所以清空解决不了。
- **之火回复五岁鸭? 2020.03.08
  [reply]gm0125[/reply]其实我遇到的问题也是这样，但是按博主的方法清空是解决不了实际问题的，为什么呢？后端返回初始化有默认值id，但这个值在option中没有，导致匹配不上label值，所以显示id值，这是不希望看到的，清空有什么用呢，还不得重新赋上？赋上还是匹配不上呀，所以清空解决不了。
- Orange-.-回复Jader丶 2019.12.24
  [reply]weixin_43509760[/reply] 不成功啊
- 出现bug问题不大回复五岁鸭? 2019.11.21
  [reply]gm0125[/reply] select选择器用法中，<el-select v-model="绑定的属性" > <el-option> ... </el-option> </el-select> 把“绑定的属性”设置为空（‘’）
- Jader丶回复五岁鸭? 2019.10.24
  [reply]gm0125[/reply] 解决了吗