el-select下拉框无法隐藏?

最新推荐文章于 2024-03-09 16:20:55 发布
最新推荐文章于 2024-03-09 16:20:55 发布
阅读量7.1k 收藏 3
点赞数 3
分类专栏： html vue 文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/corleone_4ever/article/details/104425075
版权
html 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
vue
10 篇文章 0 订阅
订阅专栏

 如图,在使用element-ui做一个需求的时候,v-show控制父元素的显示隐藏,并不能影响el-select弹框的显示隐藏

 我们需要通过js使其隐藏,参考官网可以调用blur函数

 代码如下:

这里ref挂在的是两个不同的值,讲道理如果挂载相同的值,可以获取数组,循环低啊用blur函数

ref="select"

this_.$refs.select.forEach(v => v.blur);

但是我这里始终不行,必须得使用不同的值,分开调用,也不知道是为什么,但是问题总归是解决了

 

 解决后:

 

hashdog
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
(vue)el-select根据下拉框显示隐藏的visible-change的事件使用
nyf_unknow的博客
10-12 1896
【代码】(vue)el-select根据下拉框显示隐藏的visible-change的事件使用。
el-select点击空白处无法收起下拉框（失去焦点并隐藏）
Cymiaoo
03-01 517
element 中多选的select 有个问题，就是点击空白或者关闭弹窗，下拉还会一直展示出来。
el-select下拉框无法显示 elementplus踩坑日常
最新发布
m0_58031031的博客
03-09 863
检查是否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方式（部分适用）缺点：后续需要自己再调一下格式。
el-select隐藏下拉框
weixin_57004793的博客
11-07 824
el-select隐藏下拉框
el-select options选项的显示和隐藏
m0_50666077的博客
06-21 3651
标签，通过CSS控制显示与隐藏就可以了。
ElementUI框架中el-select组件在按回车时，隐藏下拉菜单
小猫爪子
01-23 2537
测试在el-select做回车搜索时，发现无法隐藏下拉列表 查看官方文档，需要设置@visible-change el-select 代码： //html: <el-select v-model="searchForm.searchCompany" filterable placeholder="请输入企业关键字" clearable style="width: 100%" ref="selectref" @visible-change="visibleType"> <
输入框点击出现下拉框。下拉框点击不隐藏下拉框同时出现详情弹窗
runOnWay的博客
04-18 3774
需求： 实现如下图 分析： 1.下拉框带搜索，一般情况下使用el-select组件完成，该需求存在的问题是点击选项，不能隐藏下拉框，同时显示详情信息。使用el-select未找到能够实现下拉框不隐藏的方法，因此弃用el-select。 2.抛去搜索下拉框，这个样式很符合el-popover的情况。尝试使用el-popover 实现过程： 方法1 初步思路： popover1，template是el-input，内容是一个列表循环出的template为p标签的popover2。popover2的内容就是详情。
el-selcet隐藏下拉框
qq_42523321的博客
07-28 3740
因项目需求是获取焦点弹出列表，勾选列表可多选，选择完成点击确定回显到页面上，但点击获取焦点的时候el-selcet下拉框会显示，所以需要隐藏，记录一下隐藏下拉框方法 <el-select v-model=“taskRuleForms.portfolioProjectName” ref=“chooseProjectName” placeholder=“请选择” @focus=‘handleTestTasks’ multiple style=“width:240px”> 绑定ref
el-select 隐藏下拉列表，点击时自定义获取数据并可多选
m0_59791667的博客
07-15 3623
绑定ref在focus方法里面加上this.$refs.selectHeadEmpId.blur()即可隐藏下拉框。后，只要点击到了select，就会触发相应事件，并且可以配合。事件来禁止select。
Element-UI中select的下拉框popper 定位超出可视区的解决方案
beiniao123的博客
09-10 4124
一、问题描述： 当弹出框有表格el-table，el-table中有el-select，当滚动滚动条时，el-select的下拉框超出了弹出层 二、问题分析 产生该问题的原因是，滚动表格时，el-select的输入框被隐藏了，但是下拉框el-popper使用的定位方法是fixed，当显示时，使用的z-index非常大，因此显现在最上层，当滚动滚动条往下移动时el-popper并没有被隐藏。 三、解决方案 当表格滚动时，直接隐藏掉下拉框 四、代码 获取父级元素，并监听该元素的滚动事件，这里使用的是el-t
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
隐藏饿了么el-select组件的el-select-dropdown部分,只使用el-select的显示框
李十三的博客
02-22 733
隐藏el-select-dropdown,于是el-select-dropdown部分就没有插入了最外层body而是和el-select组件中的input也就是显示已选值的框并列。.el-select-dropdown 就成功隐藏了!
页面滚动时隐藏element-ui下拉框/时间弹框
weixin_42333548的博客
07-26 1281
在系统中，当（有垂直滚动时）点击下拉框后滚动页面，会发现下拉项会遮盖住页面中的元素，不会隐藏。在页面滚动或者缩放时隐藏下拉项即可（借助点击目标元素，下拉项会自动隐藏的特点）1、监听当前滚动元素的scroll事件。2、定义滚动监听的容器。3、隐藏popper。
【ElementUI】如何隐藏选择框 / 选择框美化
weixin_45968070的博客
11-29 376
现在，他被隐藏了，但依旧可以点击。我们可以在下面写一个自己的选择框，绑定 v-model=“value”，将 el-select 置于顶层即可实现选择框美化。这是一个平平无奇的 el-select。加上 class=“hideSel”
通过自定义指令,解决弹窗内容滚动时el-select下拉框,超出显示范围问题.
白云苍狗
06-27 2909
el-select下拉框超出显示范围问题,通过自定义指令,让el-select下拉框自动收回
遇到el-select选项被遮挡问题？这篇文章告诉你如何解决
热门推荐
Shids_的博客
02-23 1万+
遇到el-select选项被遮挡问题？这篇文章告诉你如何解决
在element-ui中两个下拉菜单（el-select）如何实现点击第一个下拉菜单的某一个选项实现控制第二个下拉菜单的显示与隐藏！
TangMonk的博客
08-06 1732
在这个示例中，首先有两个选择框，一个是第一个选择框，另一个是根据第一个选择框的选项控制显示与隐藏的第二个选择框。如果选中的不是第一个选项，我们将 `showSecondSelect` 设置为 `false`如果选中的是第一个选项，我们将 `showSecondSelect` 设置为 `true`这样，通过监听第一个选择框的选项变化，您就可以动态地控制第二个选择框的显示与隐藏了。在 Element-UI 中，您可以通过。，从而显示第二个选择框。，然后根据选中的选项来。
el-select 下拉框怎么获取隐藏值
07-27
el-select下拉框获取隐藏值的方法是通过v-model绑定一个变量来获取选中的整个对象值。在引用\[1\]中的代码示例中，可以看到在handleConfigDownChange方法中，通过item.examinationroomId来获取选中的隐藏值，然后将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值