修改element-ui 的el-select下拉组件增加filterable会出现点击收回图标下拉选项收不回的bug

已于 2023-11-10 14:30:28 修改
阅读量1.3k 收藏 3
点赞数 5
文章标签： vue.js 前端 javascript elementui
于 2022-05-31 15:41:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsn690607887/article/details/125067002
版权

vue 项目可以在App.vue  的create 方法里加上下面代码，就可轻松解决

    Object.getPrototypeOf(
      this.$options.components
    ).ElSelect.options.methods.handleFocus = (event) => {
     
    };

哈哈发财了
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
element-ui 中 el-select基础多选组件选择后不会自动关闭
u010306287的博客
06-12 6473
element-ui 中 el-select基础多选组件选择后不会自动关闭el-select mutiple组件下拉框选择后不会自动关闭 el-select mutiple组件下拉框选择后不会自动关闭 使用setTimeout + blur() 方法 <el-select v-model="value1" ref="selectAppType" multiple placeholder="请选择"> <el-option v-for="item in option
Element-ui的el-select 选择器，filterable-可输入文字进行筛选功能快速查找选项，clearable-可以清空当前选择项
热门推荐
栖身星河之中
02-28 2万+
为 el-select 添加 filterable 属性即可启用筛选功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现。 filter-method 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。 //官方代码： <template> <el-select v-model="value" filterable placeholder="Selec
el-select 中加了filterable 点击箭头下拉框回收不去问题
weixin_63896561的博客
08-01 1035
在App.vue的created钩子中添加代码。1、添加过滤属性后点击下箭头不收起下拉框。解决方式①：参考连接：（亲测有用）解决方式②：参考链接：（没亲测）触发事件后，下拉框不关闭。2、@change通过。
【elementUI】el-select和el-tree结合使用后，select下拉面板在选中数据后不会自动折叠的解决方法
最新发布
bbt953的博客
05-08 294
el-select和el-tree结合使用后，select下拉面板在选中数据后不会自动折叠的解决方法
ElementUI框架中el-select组件添加filterable属性后，切屏操作select组件会自动焦点
hopyGreat的博客
01-06 5579
实际情况对应的代码段： <!DOCTYPE html> <html> <head> <title>test</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-
【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起
amoureux555的博客
01-31 1725
elementui下拉框树形菜单不收起
element UI select 手动收起下拉区域
m0_47005349的博客
06-01 4729
给select标签添加ref属性如下 <select v-model="" ref=“configSelect” @change=""> js控制手动关闭： this.$refs.configSelect.blur();
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提供的一个...
element-ui 关于获取select 的label值方法
10-18
在Element UI框架中，`el-select`组件是一个常用的下拉选择器，用于展示一组可选项供用户选择。本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. ...
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
elSelect点击空白处无法收起下拉框（失去焦点并隐藏）
Scott_zt的博客
06-02 9732
初次使用elSelect这个组件的时候，会碰到无法实现 当下拉菜单处于展开状态时，如不点击到组件上，无法收起下拉菜单的情况。 如下图，点击空白区域，只会触发html的默认事件 这里博主亲测可用的解决办法是：官方的Select组件提供了“blur” 方法，并借助 “v-click-outside”方法实现 在main.js中，进行全局注册自定义指令 Vue.directive(‘click-outside’, { bind: function (el, binding, vnode) { el.cl
elementUI最新版的el-select使用filterable无效无法匹配正确搜索结果的Bug解决办法
陈小翔的博客
07-01 5279
项目场景： 下拉框搜索有问题 问题描述： 今天做开发时遇到一个elementUI存在的bug。 当el-select使用filterable功能搜索时，如果你恰巧使用的是微软拼音输入法，那么你有可能会遇到搜索结果和输入的值不匹配，如下图： 我输入的是黄金，结果却显示有双皮蛋，龙须面。 原因分析： 打开https://element.eleme.cn/#/zh-CN/component/select 定位到【可以利用搜索功能快速查找选项】 切换成微软拼音输入法 点击搜索下拉框输入“黄金”，确认输入时
element-ui 中 el-select 组件选择后不会自动关闭
乐辞的博客
11-27 2149
在使用 el-select 组件时，打开 select 选择框后选择或点击其他元素后不会自动关闭 el-select 框的问题。我们只需要将在操作后手动让 el-select 失去焦点即可收起下拉框。
vue select下拉选择可搜索
weixin_42378006的博客
02-24 5026
<a-form-item label="一级服务类目名称"> <a-select @focus="handleFocus" @change="selectParentOne" showSearch v-decorator="...
elementui时间选择器下拉框在输入框上方弹出时，点击确定或者取消按钮后有时无法收起下拉框
qq_45752177的博客
11-13 425
elementui时间选择器下拉框在输入框上方弹出时，点击确定或者取消按钮后有时无法收起下拉框
elemenUI 2.x：下拉选择器中一些属性的配合使用
lalala_dxf的博客
01-18 1409
elementUI组件下拉框的一些特殊使用
项目中会遇到的问题，el-select组件不回显，数据多选保存空白问题
weixin_43204464的博客
10-24 5374
2.如果绑定正确，可能是属性值数据类型不正确，比如，我的问题就是后台el-option绑定的数组，里面的id是number类型，而这一条数据给的id、是string类型，所以不回显label，只回显value。1.检查属性是否绑定正确，比如value绑定的数据，是否和数组的：key一致。label是否绑定的是要回显的数据。
el-select点击空白处无法收起下拉框（失去焦点并隐藏）
Cymiaoo
03-01 1035
element 中多选的select 有个问题，就是点击空白或者关闭弹窗，下拉还会一直展示出来。
element-ui下拉出现多选树状图
09-17
element-ui是一套基于Vue.js的UI组件库，提供了丰富的组件和工具，方便开发者进行项目开发。其中，下拉多选树状图是element-ui中的一个常用组件之一。 使用element-ui的下拉多选树状图组件，可以实现用户通过下拉选择框来选择多个选项，并且这些选项还以树状图的形式展示。这在处理包含层级关系的数据时尤其有用。 首先，在Vue组件中引入element-ui的下拉多选树状图组件，即el-select组件。然后，在组件中定义一个变量来存储用户选中的值，例如selectedOptions。接着，在挂载到DOM之前设置el-select组件的placeholder属性，如：请选择。 接下来，通过调用element-ui提供的API，将需要展示的选项作为树节点传递给el-select组件。可以使用element-ui的el-tree组件来支持树状结构，通过配置tree-props属性来指定树节点的显示字段，例如label和children。在数据源中，可以为每个节点设置一个唯一的key属性。 然后，在el-select组件的v-model属性中绑定selectedOptions变量，以实现选中值的双向绑定。此时，用户可以通过下拉选框选择多个选项，选中的选项会自动存储在selectedOptions变量中。 最后，在Vue组件的template中使用el-select组件来展示下拉多选树状图。设置el-select的filterable属性为true，可以让用户通过输入关键字来筛选选项。使用el-option组件来表示每一个下拉选项。为el-select组件设置多选属性multiple，并通过el-tree组件的子节点slot来显示树状结构。 通过以上步骤，我们就可以使用element-ui快速实现下拉多选树状图。使用这个组件，可以方便地展示具有层级关系的数据，并让用户灵活选择多个选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值