Element-ui el-select远程搜索重复输入两次一样的query第二次不发送请求

最新推荐文章于 2024-08-03 08:44:23 发布
最新推荐文章于 2024-08-03 08:44:23 发布
阅读量1.6k 收藏
点赞数
分类专栏： vue 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46602557/article/details/111238663
版权

Element-ui el-select远程搜索重复输入两次一样的query第二次不发送请求


出现问题原因：

elementui源码中将第一次搜索的query缓存起来，在第二次搜索时会与缓存的query进行比较，如果是一致的话，不会进行远程搜索；

解决方法：

<el-select ref="select"></el-select>

this.$refs.select.query = null;

或者

this.$refs.select.setQuery = null;

这个可能会取决于element-ui的版本，可以console.log(this.$refs.select)里面相关的query方法 将其值设置成null或者‘’即可

ninieleon
关注
专栏目录
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
小陈的博客
05-26 1万+
如果有同学还没用过这个功能，可以先了解下： 使用场景 大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。 解决方法 现在的 elementPlus 已经有虚拟化选择器了，直接使用，非常方便，如果你使用的是Vue3，可以直接移步 elementPlus官方文档 如
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
【Element】el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
热门推荐
coderYYY的博客
03-20 2万+
el-select下拉选择器搜索选项，自定义搜索方法，结合后端接口远程搜索
el-select远程搜索第一次请求返回时间长，导致第一次请求结果覆盖第二次请求
qq_37516924的博客
07-21 1184
方法外定义临时属性存储最后一次请求参数，返回时对比是否为想要的结果 remoteMethod(query) { if (query !== null && query.length > 1) { var dataTemp = { honourFlag: 1, attendeeNameLike: query,
【Element Ui】el-select远程搜索时remote-method方法触发两次
最新发布
alikami的博客
08-03 809
el-select远程搜索时remote-method方法触发两次
关于Element-ui的select选择器ios端点击两次选中
CNyuCHengrui的博客
07-13 402
遇到这个问题后搜索进行选择方法，发现所有的方法都是安装scss然后使用这段代码 .el-scrollbar { .el-scrollbar__bar { opacity: 1 !important; } } 实际只需要在css中添加 .el-scrollbar .el-scrollbar__bar { opacity: 1 !important; } ...
el-select组件远程搜索时，单选状态下无法触发remote-method远程搜索功能——基础积累
yehaocheng520的博客
11-16 1万+
今天在做后台管理系统时，需要用到select组件的远程搜索功能： element-ui官网上是有相应的远程搜索的功能的： 具体思路就是：select组件支持输入功能，在输入关键字后，触发remote-method方法，然后根据关键字调取接口，获取数据，然后再展示到下拉框中。 官网上给出的是多选的select组件，经过单选和多选组件的对比，发现，多选的组件完全没有问题。 针对上面的三点，多选时，都可以满足，都可以触发remote-method远程搜索功能。 但是在单选时，就出现了问题：上图中拿到关键字的
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...
Element:el-select多选后点击保存，再次选择不显示的问题
weixin_46939955的博客
10-27 792
直接强制刷新 <el-select v-model="value" multiple @change="changeOptions" placeholder="请选择"> <el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.value" ></el-option> </el-select> changeOptions
input输入框file类型选择同样输入框第二次不触发onchange事件的解决办法
一只哆啦A梦的博客
04-25 2135
说一下onchange触发原理：大致是以下几个步骤、一、当input捕获到焦点后，系统储存当前值二、当input焦点离开后，判断当前值与之前存储的值是否不等，如果为true则触发onchange事件。试过网上几种方式，什么onpropertychange、oninput啊都没有解决问题，最后找到一个简单粗暴的方法：选择一次后将input标签的value属性置为空即可,即$('#input').va...
el-select 出现提示后 失去焦点，再次获取焦点会出现上次推荐数据
sby_163的博客
03-11 2351
期望：失去焦点后，再次点击不出现上次推荐数据 解决方法： <el-select …… @visible-change="loseFocus" …… > <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item.key" /> </el-select> …… data () { return {
vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求
aiyang1214878408的博客
05-28 3541
@[TOC]vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求 在element-ui中使用el-select远程搜索时，输入文本搜索无法及时发送网络请求获取数据，需要按下删除或者回车才能刷新选择框，但是选择一个值后会发现无法在去请求新的数据了。加入可多选属性时就没有这个问题。 引入组件 用ref绑定节点 <el-form-item label="产品名称：" prop="productName"> <el-select ref="
实现el-select的远程搜索，并且展示最近搜索的十条数据
weixin_64359407的博客
11-16 2012
使用el-select实现远程搜索，并且可以输入进行搜索，首次点击的时候显示十条历史记录，在输入之后就展示远程搜索返回的数据。
【测试开发】vue — elementUI select选择器 远程搜索实现
测试开发的成长点滴
05-21 807
先提下背景：就是在测试的过程中，经常需要用到收货这个功能。在PC端下了采购单，再到APP去对应功能里，再输入好多个字段，上传图片等动作后，终于可以提交。 于是，我决定在平台上加个小工具，快捷收货，方便测试用。 那么，在收货操作中，要有收货人这个角色。为了更好的适用性，我决定做成一个搜索框，支持实时搜索人员。于是，从elementUI上找到了select选择器 远程搜索。 这里提一下，前端菜鸟怎...
element中el-select手动清除选中再次选择不显示的问题
weixin_39407291的博客
08-20 2862
使用的是强制刷新的方法： this.$forceUpdate() 在切换不显示的el-select的元素上绑定@change=“changeValue” changeValue(){ this.$forceUpdate() }
element-ui的el-select远程搜索，输入中文不能及时刷新
q_QAQ_q的博客
03-01 1520
在element-ui中使用el-select远程搜索时，输入中文需要按下删除或者回车才能刷新选择框 el-select加ref="elSelec" <el-select ref="elSelec" filterable remote :loading="seloading" :remote-method="remoteMethod" clearable> <el-option :label="item.name" :value="item.id" v-for="(item,inde
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值