el-selcet隐藏下拉框

最新推荐文章于 2024-09-14 10:52:06 发布
原创 最新推荐文章于 2024-09-14 10:52:06 发布 · 4.5k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #elementui #前端
本文介绍了如何在使用Element UI的el-select组件时，通过绑定ref并调用blur方法来隐藏下拉框，以实现实时获取焦点后列表的自动隐藏功能。

因项目需求是获取焦点弹出列表，勾选列表可多选，选择完成点击确定回显到页面上，但点击获取焦点的时候el-selcet下拉框会显示，所以需要隐藏，记录一下隐藏下拉框方法
在这里插入图片描述
<el-select v-model=“taskRuleForms.portfolioProjectName” ref=“chooseProjectName” placeholder=“请选择” @focus=‘handleTestTasks’ multiple style=“width:240px”>


绑定ref 在focus方法里面 加上this.$refs.chooseProjectName.blur() 即可隐藏下拉框

vue实现select下拉显示隐藏功能
12-30
今日，怂怂就来说说，在项目中刚遇到这么一个功能需求； 描述：当下拉选择不同的属性选项，需展示对应的内容界面； select下拉菜单如下： 当下拉选择【表结构变更】、即展示如下界面： 当下拉选择【接口变更】、即展示如下界面： 代码实现 vue.js： //定义一个select下拉菜单 <el-option label=接口变更 va
el-select隐藏下拉框
weixin_57004793的博客
11-07 1328
el-select隐藏下拉框
ElementUI框架中el-select组件在按回车时，隐藏下拉菜单
小猫爪子
01-23 3105
测试在el-select做回车搜索时，发现无法隐藏下拉列表 查看官方文档，需要设置@visible-change el-select 代码： //html: <el-select v-model="searchForm.searchCompany" filterable placeholder="请输入企业关键字" clearable style="width: 100%" ref="selectref" @visible-change="visibleType"> <
el-select 隐藏下拉列表内容区
weixin_54514048的博客
04-25 1463
jqery隐藏下拉框。
HTML：select、option中设置默认值，且默认值不在下拉框中出现；下拉框不显示默认数据
weixin_60948956的博客
05-07 3817
HTML：select、option中设置默认值，且默认值不在下拉框中出现下拉框不显示默认数据,在上面加一个空的option标签就可以了
el-select 隐藏下拉列表，点击时自定义获取数据并可多选
m0_59791667的博客
07-15 4085
绑定ref在focus方法里面加上this.$refs.selectHeadEmpId.blur()即可隐藏下拉框。后，只要点击到了select，就会触发相应事件，并且可以配合。事件来禁止select。
el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏
qq_44716001的博客
07-04 2052
【代码】el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏。
el-select options选项的显示和隐藏
m0_50666077的博客
06-21 6199
标签，通过CSS控制显示与隐藏就可以了。
(vue)el-select根据下拉框显示隐藏的visible-change的事件使用
nyf_unknow的博客
10-12 4888
【代码】(vue)el-select根据下拉框显示隐藏的visible-change的事件使用。
elementUI el-select取消/隐藏下拉框 随机抽取人员
m0_64491262的博客
10-20 3090
取消el-select下拉框 随机选择人员
ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏
BADAO_LIUMANG_QIZHI的博客
08-13 5003
场景 在el-select的下拉框中，下拉选择指定的下拉项时才会显示后面的单选框，否则不显示。 效果如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先在页面中添加这两个控件 <el-row> <el-col span="10"> <el-form-item labe...
vue项目element-ui中el-select回车键隐藏下拉框，实现按回车键查询
热门推荐
在奔跑中寻找的博客
10-29 1万+
需求： 1、页面中有输入框，选择框，日期时间选择，按回车键实现查询功能 网上查了都是在el-select弹框消失时（visible-change返回false），使select失去焦点的，然后页面document绑定keyup事件。 这样做，如果页面上其它控件有回车事件，就会被覆盖掉，比如分页选择器中的回车事件。 解决思路： 1、隐藏下拉框：查看el-select源码发现下拉框的显示隐藏由visible变量在回车键按下去时(keydown)控制。这就好办了，给组件设置keydown事件，控制组件上的visi
ElementUI框架中el-select组件在按回车时，如何隐藏下拉菜单，并触发键盘事件
站在顶峰看星星
07-24 7159
场景： 根据产品需求，下拉菜单在按下回车后进行搜索 判断页面所需的筛选项是否为空，如果为空，按下回车，不执行查询 按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点） 源码： <el-col :md="8" :sm="12" :xs="24"> <el-form-item label="出差城市：" style="margin-bottom: -18px;"> <el-col :span="11"> <el-form-ite
el-select 点击输入框不弹出选项的下拉框
weixin_44273231的博客
11-18 4648
el-select 点击输入框不弹出选项的下拉框
关于vue3中elementplus的el-select的子控件控制select隐藏实现总结
最新发布
lx1046139557的博客
09-14 1250
开发酒店网站房间选择控件时的小问题总结
二次封装组件element-ui的el-select多选tag数值多余隐藏
虞公子的博客
11-18 3892
element-ui的Select 选择器，多选自动隐藏多余标签
去除element-ui下拉框的下拉箭头
qianluo111的博客
09-16 7797
去除element-ui下拉框的下拉箭头
选中el-select组件在按回车时，如何隐藏下拉菜单
呆子小木心的博客
09-24 2439
按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点） <!--@visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false--> <el-select style="width: 100%;" v-model="form.provinceId" placeholder="省份" ref="selectProvinces" @visible-change="isShowSelectOptions" @ch
使用element过程中出现的问题及解决方法（1）
接着奏乐接着舞的博客
06-29 2559
主要内容为日常使用饿了么UI过程中犯错和解决方案。ps:以后会更新
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一直小咸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值