el-select 中加了filterable 点击箭头下拉框回收不去问题

最新推荐文章于 2025-07-01 17:34:22 发布
原创 最新推荐文章于 2025-07-01 17:34:22 发布 · 置顶 · 901 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文介绍了一种解决el-select组件在使用filterable属性时出现的点击箭头无法收回的问题的方法。通过重写ElSelect的handleFocus方法为空操作，成功解决了这一难题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  // el-select 中加了filterable 点击箭头回收不去问题
    Object.getPrototypeOf(
      this.$options.components
    ).ElSelect.options.methods.handleFocus = () => {};
el-select光标位置问题，下拉框选中内容后，光标在输入框最前面，且无法移动。 该如何让光标默认在后面？
**My Coding Family**
02-05 762
🏆本文收录于专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家！持续更新中，up！up！up！！
el-select filterable模糊搜索在iOS手机上无法弹出软键盘，解决方案
zhangxueyou2223的博客
06-12 2033
前提：el-select filterable模糊搜索在iOS手机上无法弹出软键盘，在手机上使用时，iOS手机，该组件无法唤起软键盘，导致没法进行模糊搜素。于是。开始去找原因，发现主要是因为 组件中，上有一个属性，而该属性规定输入字段为只读。阻止了用户对值进行修改，直到满足某些条件才行。其在微信开发者工具上是可以模糊搜索，在手机上没法弹出软键盘搜素。
el-select使用filterable下拉无法关闭得问题
warrah 南极狼
03-17 1331
el-select自定义下拉表格
vue2 el-select下拉选择框 点击其他位置或者弹窗关闭下拉框/点击取消时，下拉框变成之前的值
szzlh123456789的博客
07-01 332
elSelect点击空白处无法收起下拉框（失去焦点并隐藏）methods里加个 clickOutSide。
修改element-ui 的el-select下拉组件增加filterable会出现点击收回图标下拉选项收不回的bug
lsn690607887的博客
05-31 1528
vue 项目可以在App.vue 的create 方法里加上下面代码，就可轻松解决 Object.getPrototypeOf( this.$options.components ).ElSelect.options.methods.handleFocus = (event) => { };
element ui el-select点击图标无法关闭下拉框问题
woyaojinali的博客
06-30 2968
element ui el-select点击图标无法关闭下拉框问题 当el-select设置了filterable 筛选的时候 点击图标无法关闭下拉框 思路：利用visible-change方法获取下拉框打开和关闭事件，然后focus方法拿到鼠标事件 上代码： <template> <el-select v-model="value" filterable placeholder="请选择"> <el-option v-for="item in o
bug修复：elementui el-select组件点击图标无法关闭下拉框
xxjiushini的博客
11-16 3155
bug修复：elementui el-select组件点击图标无法关闭下拉框 问题：el-select组件增加了filterable筛选后 点击图标无法关闭下拉选项框 解决方法：在main.js里的created生命周期里添加如下代码即可，全局修复bug，亲测有用 //修改ele 的select下拉组件增加filterable会出现点击收回图标下拉选项收不回的bug Object.getPrototypeOf(this.$options.components).ElSelect.optio
el-select数据过多懒加载的解决(loadmore)
10-16
2. 使用v-el-select-loadmore指令来绑定加载更多数据的方法。当select组件的滚动条滚动到底部时触发该方法。 3. 在组件的mounted生命周期钩子中，开始初始化加载数据。使用formData对象来管理分页信息，包括页码...
el-select点击不弹出下拉框
最新发布
07-15
在使用 `el-select` 组件时，如果遇到点击后无法弹出下拉框的问题，通常是由以下几个原因导致的，并可通过以下方式进行排查和解决： 1. **检查是否设置了 `disabled` 属性** 如果 `el-select` 被设置了 `disabled...
【element-select】添加过滤属性以及@change后下拉框异常
u012597989的博客
06-27 807
1、添加过滤属性后点击下箭头不收起下拉框 2、@change通过dialog触发事件后，下拉框不关闭
el-select 可过滤状态点击最右arrow icon可收起
qq_27314517的博客
07-14 1029
el-select 可过滤状态点击最右arrow icon可收起 公司测试又在折磨人，el-select组件在设置了filterable 属性的情况下点击右边的icon位置，下拉是收不回来的，只能点击可输入框和组件外其他区域才可以，bug就来了 单纯只是filterable 很好解决，直接css： /** * 下拉框图标点击可收起 */ .el-select{ .el-input__inner{ position: relative; z-index: 10; backgroun
el-select多选时候之后，展示多选条件不允许被删除
Fhm123456_的博客
06-20 2597
效果如图：第一步：el-select 加一个ref属性，例如：ref="medicalAdviceRef"，为了操作js用，第二部：
iview select filterable属性使用下拉bug
OldStreet61的博客
01-11 5971
今天做项目时候在iview 原生自带的select中设置filterable，下拉时候可进行查询，但是发现选中载打开模态框每次都绑定上一次的值，解决方案就是在关闭弹框时候将this.$refs.select.setQuery(null)，解决问题。解决方案，来自于以下链接： 转自：https://www.cnblogs.com/victory820/p/10145485.html 1场景：弹框...
iview select filterable属性使用小陷井
热门推荐
素钗一生推
09-06 1万+
开了一个内容管理系统，使用了webpack vue 构建了一个iview项目，在列表当中使用新增，编辑弹窗时，有碰到一个使用select控件（select 设置了filterable属性），在编辑赋值之后，修改，保存之后，去新建，由于在编辑那一步有重新修改值，导致 select 的 query不为空，最终导致新建弹出的下拉选择项只有前一次操作选中的项，上个图，看看 编辑选择的结果： 再次新...
el-cascader和el-select点击别处让下拉框消失
vfjcgg的博客
08-25 2854
el-cascader： 可以给el-cascader绑定一个@blur事件 然后执行 this.$refs.area.dropDownVisible = false这条语句 <el-cascader ref="area" v-model="addForm.idList" :props="defaultParams" :options="treeList" clearable
select下拉框 不能复制的问题，select下拉框禁用回车打开事件，回车要用于查询 select实现placeholder效果
tanzongbiao的专栏
03-15 3188
解决方法： user-select: all; <label for="serviceType" style="display: inline-block;width: 65px;text-align: right;line-height: 35px">类别：</label> <select class="form-control" id="serviceType" style="user-select: all;width: 120px;margin-right:...
iview中select使用filterable的问题
qq_43033251的博客
06-02 1773
iview,select,fiterable
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值