ElementPlus中el-select远程搜索el-option默认不展开的问题解决

最新推荐文章于 2024-06-19 15:45:41 发布
最新推荐文章于 2024-06-19 15:45:41 发布
阅读量619 收藏 7
点赞数 8
分类专栏： Vue ElementPlus 前端 文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37945670/article/details/136562499
版权
前端 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
Vue
1 篇文章 0 订阅
订阅专栏
ElementPlus
1 篇文章 0 订阅
订阅专栏

给前端分配完任务要求实现el-select去执行远程搜索用户，但是他不知道为啥el-select必须输入一个东西才能显示option的数据

在这里插入图片描述
没法做到在获取到焦点的时候就自动提示，然后他还解决不了，经过我一番debug源码发现这个问题是由于2.5.2版本新增了两行代码

+    if (props.filterable && props.remote && isFunction(props.remoteMethod))
+      return

然后又在issues中遇到了相同问题
如果你能升级elementPlus版本的话就升级或退回到2.5.1版本解决，如果升级不来就使用

automatic-dropdown指令解决

XuanRanDev
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 - Element Plus 选择器 el-select 既可以选择下拉又可以手动输入文本功能，让 select 选择器同时拥有下拉选择和输入文本（支持手动输入文本和下拉选择）
王佳斌
12-02 8578
vue3，element plus，select选择器，el-select，el-select实现可下拉选择和手动输入，element-plus组件库中选择器怎么像输入框一样可以输入，既可以手输也可以选择，el-select可选择可以手动输入，Vue3使用el-select下拉框实现可输入可选择，el-select可新增输入可选择，vue3使用element plus选择器Select既可以下拉选择也可以手动输入，实现el-select可选择/可输入，怎么能让输入框又能选择又能输入文本，既有下拉功能也有输入
elementUI 使用 el-select 的远程搜索功能，导致数据无法回显怎么解决？
小陈的博客
05-26 1万+
如果有同学还没用过这个功能，可以先了解下： 使用场景 大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。 解决方法 现在的 elementPlus 已经有虚拟化选择器了，直接使用，非常方便，如果你使用的是Vue3，可以直接移步 elementPlus官方文档 如
element 选择器没反应_vuejs2.0的element-ui组件select选择器无法显示选中的内容
weixin_29496633的博客
12-24 390
我也遇到了同样的问题是表格编辑弹窗 弹出框要预填充表格里的数据使用row里面的数据赋值到el-select v-model里`//template HTML 部分//js 方法methods: {selectChange(val) {console.log(val)// 展开true || 收起false//主要看这里if(this.content && this.conte...
SharePoint ElementPlus 进行 el-select 远程搜索
最新发布
weixin_59185978的博客
06-19 187
1.SharePoint 人员搜索。SharePoint 远程搜索。2.el-select远程搜索。实现sharepoin人员搜索。创建el-select时勾选。
ElementPlus选择器el-select需要同时收集label和value
zsy1833579605的博客
04-16 618
方法用Ref绑定获取。
解决element-ui中的el-select选择器无法显示选中内容的问题
浮生小二的博客
01-19 1261
排查到我的form表单，在定义表单属性的时候，没有在data中定义该字段。官方文档有这么一段话，就是属性一定要挂载到data上，不然无法检测。要更新，一定检查你的字段是否在data对象上。检查change是否触发，会触发。检查数据控制台是否报错，无报错。最后开始百度，查看文档。
关于el-select 远程搜索下拉框消失解决办法
qq_37225650的博客
03-28 2818
.seclectSearch{ .el-select__caret::before{ content: '\e6e1'; } .is-focus{ .el-select__caret{ transform: rotateZ(0deg); } } }
Element UI Select组件远程搜索没有箭头图标
今津南泽克骁的博客
12-11 1865
Element UI Select组件远程搜索没有箭头图标
element-ui中的el-select下拉框选中不显示问题
热门推荐
lxiang222的博客
10-24 2万+
最近在使用element的el-select时出现了一个奇怪的坑，就是当我选中了下拉框的内容之后但是下拉框中不展示选中的label值，具体代码如下，先展示出现问题的代码 <el-form-item label="推荐产品一："> <el-select filterable v-model="detail.recommendProductId" clearable @chang...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
详解element-ui中el-select的默认选择项问题
10-16
本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个用于创建下拉选择列表的组件。它通常与`el-option`组件配合使用，`el-option`用于定义可选的...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
Element_select 选择器 选中框中显示不了选中的值
虎康的博客
10-21 1653
【代码】element select 选择器 选中框中显示不了选中的值。
vue通过el-select下拉框选择成功时不显示，当填写其他内容时，才显示的问题
xuguoxing123的博客
03-30 3042
       最近在实际开发应用中遇到这么一个问题，如下所示：        当选择“计算机科学与技术”的时候，此时并不会展示已经选择的内容，也不会触发任何事件，当填写其他内容时，已选择的内容就能展示出来，如下图所示：        我的下拉选择框的代码的写法是这样子的：  &nbsp
el-select下拉框无法显示 elementplus踩坑日常
m0_58031031的博客
03-09 2020
检查是否element-plus版本过旧，至少要下载^1.0.2-beta.66 可以在package.json看到版本号。在el-select里面加入:popper-append-to-body="false"使用elementui的dropdown平替一下，这个成功解决了我的问题；如果报错是版本冲突可以用npm install --force解决。在使用el-select的时候参考了官方文档，但下拉框无法显示。安装不同版本的element-plus方式（部分适用）缺点：后续需要自己再调一下格式。
element-plus的下拉框使用远程搜索的时候，下拉框不显示箭头图标的问题
maocily的博客
03-03 525
在个人兼职的项目中，用到了Vue3+Element-Plus,偶然发现某个页面使用的element-ui的下拉框组件，两个呈现的形式竟然不同，即一个是有箭头，一个是没有箭头。然后，面向百度的编程，寻找解决办法，有的说是通过CSS的方式，有的说通过JS的方式，本人觉得太麻烦，都没试过，也不知道行不行。，有耐心的老铁去试试把。最后，看了官方文档，只要加上remote-show-suffix属性即可解决这样的问题。经过分析对比，发现没有箭头的是使用了远程搜索的方法和remote属性。
vue3+element plus实现查询条件展开和收起功能
this_zq的博客
11-29 2332
如图所示，这样一个查询页面，上面的条件太多，使得下面的列表展示的空间就变得很小了。所以，需要有一个东西控制，当条件太多时，就展示一个展开/收起按钮，可以控制查询条件的展开和收起。
element UI select 手动收起下拉区域
m0_47005349的博客
06-01 4749
给select标签添加ref属性如下 <select v-model="" ref=“configSelect” @change=""> js控制手动关闭： this.$refs.configSelect.blur();
el-select中筛选el-option
09-11
在el-select中筛选el-option可以通过以下几种方式实现： 1. 根据引用中的示例代码，可以通过给el-select绑定change事件来筛选el-option。在change事件中，可以根据选中的值来更新el-option的显示状态。例如，可以使用v-model绑定一个变量来存储选中的值，然后使用v-if或v-show指令来控制el-option的显示与隐藏。 2. 可以参考引用中的示例代码，在挂载完el-select的DOM后，通过获取el-select的宽度，并将宽度赋值给el-option的style属性中的width属性。这样可以使el-option的宽度与el-select保持一致，从而实现筛选效果。 3. 可以使用$forceUpdate()方法来强制更新el-select和el-option的显示状态。如引用中的示例代码所示，在el-select上绑定change事件，并在change事件中调用$forceUpdate()方法，以更新el-select和el-option的显示状态。 以上是几种常见的在el-select中筛选el-option的方法，根据具体需求可以选择适合的方式来实现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值