element ui select选择器，使input失去焦点，并隐藏下拉框

最新推荐文章于 2024-05-20 18:02:48 发布
最新推荐文章于 2024-05-20 18:02:48 发布
阅读量1.3w 收藏 7
点赞数 6
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41643226/article/details/105385803
版权

逻辑是当表单中一个input输入之后才显示下拉框，反之提醒需要输入

百度很多，有人说是element ui 的版本，升级就行了，但是代码没有贴出来（代码真的很简单，但是还是有直观的代码好一些，我是渣渣T。T）

实现效果如下

代码：

重点是要给select附上 ref="xxxx"  

在click函数中： this.$refs.xxxx.blur()

Sun_mm哭了。
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
input获取焦点显示内容，失去焦点隐藏内容。点击内容获取点击值显示内容
肖肖肖丽珠的博客
04-28 2133
鼠标移入电话号码。获取焦点，显示下面的电话号码的列表。 失去焦点。隐藏下面的电话号码列表。 移入点击一个电话号码。得到电话号码列表隐藏。 此时会出现一个问题： 当我点击电话号码列表的时候，input也是失去焦点。他没有获取点击的内容就执行了失去焦点的隐藏操作。 我这里就写了在失去焦点的时候写了一个延时setTimeout。如果是点击电话列表的，就先去执行那个函数事件了 //鼠...
elSelect点击空白处无法收起下拉框（失去焦点并隐藏）
Scott_zt的博客
06-02 9668
初次使用elSelect这个组件的时候，会碰到无法实现 当下拉菜单处于展开状态时，如不点击到组件上，无法收起下拉菜单的情况。 如下图，点击空白区域，只会触发html的默认事件 这里博主亲测可用的解决办法是：官方的Select组件提供了“blur” 方法，并借助 “v-click-outside”方法实现 在main.js中，进行全局注册自定义指令 Vue.directive(‘click-outside’, { bind: function (el, binding, vnode) { el.cl
el-select 组件失去焦点
热门推荐
qq_16714671的博客
12-21 1万+
el-select 标签设置ref属性后直接绑定失去焦点事件blur，通过blur事件直接进行绑定隐藏下拉框方法，elementUI中提供了失去焦点的方法，其方法名也是blur。 代码如下： <el-select v-model="oldQuery.type" size="mini" placeholder="请选择" ref="fuzzySearch"
el-input 自动获取焦点
最新发布
一只想躺平却不敢躺平的小菜鸟
05-20 241
el-input 自动获取焦点
输入框失去焦点，让下拉框隐藏
qq_47997447的博客
06-14 481
输入框失去焦点，让下拉框隐藏的关键所在
vue项目element-ui中el-select回车键隐藏下拉框，实现按回车键查询
在奔跑中寻找的博客
10-29 9848
需求： 1、页面中有输入框，选择框，日期时间选择，按回车键实现查询功能 网上查了都是在el-select弹框消失时（visible-change返回false），使select失去焦点的，然后页面document绑定keyup事件。 这样做，如果页面上其它控件有回车事件，就会被覆盖掉，比如分页选择器中的回车事件。 解决思路： 1、隐藏下拉框：查看el-select源码发现下拉框的显示隐藏由visible变量在回车键按下去时(keydown)控制。这就好办了，给组件设置keydown事件，控制组件上的visi
html 下拉框失去焦点,如何通过js或vue.js使el-select的下拉列表隐藏或失去焦点？...
weixin_34515452的博客
06-05 1871
升级了最新大享上。是发了概开程态间些告人屏果会区。版本的elementUI使用blur方法就好使微和二第说，班。都年很过过事发工开宗定据发指互数个遍前互就了@keyup.right.native="keyUpRight(2,scope.$index)"v-model="scope.row.unconfirmLineCopy">keyUpRight(col, row) {//最后一行if (r...
Qt实现编辑框失去焦点隐藏功能
不定时分享最优质的网络技术与教程，满满的干货。
12-03 2762
今天来为大家分享一个小功能，首先看实现的效果吧~功能讲解：QLineEdit控件进行文本编辑，点击保存按钮后，隐藏编辑框和保存按钮，仅展示编辑内容，当鼠标点击空白处时，同样隐藏编辑框、隐藏保存按钮，但不存储编辑文本如果你要需要实现这样的功能，就继续往下看吧~三个控件：QLineEdit编辑框、QPushButton按钮、QLabel纯文本展示。默认QLabel控件是隐藏状态，只有点击保存按钮以及失去焦点后才会展示。此时需要响应两个消息。消息1：点击保存按钮 connect(ui.btnSave, 
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
更多说明移步：https://blog.csdn.net/ZYS10000/article/details/120118373
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
el-date-picker手动隐藏日期选择
s_9527_s的博客
05-11 3216
前言：在项目中遇到要移动模块，但是移动时没有触发el-date-picker的blur，导致模块移动时el-date-picker的日期选择框没有关闭，未达成效果。 首先，查看element文档发现el-date-picker的methods方法中只有focus，没有blur 但是还是添加了ref，打印查看，眼见为实 可以看到是有一个blur方法的，于是就添加了 this.$refs.selectMove2.blur()尝试，结果发现，并没有解决问题，picker日期弹窗还是存在的，没有.
ElementUI框架中el-select组件在按回车时，如何隐藏下拉菜单，并触发键盘事件
站在顶峰看星星
07-24 6377
场景： 根据产品需求，下拉菜单在按下回车后进行搜索 判断页面所需的筛选项是否为空，如果为空，按下回车，不执行查询 按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点） 源码： <el-col :md="8" :sm="12" :xs="24"> <el-form-item label="出差城市：" style="margin-bottom: -18px;"> <el-col :span="11"> <el-form-ite
Element UI-Select选择器结合树形控件
itmacy的博客
05-18 3825
Element UI-Select选择器结合树形控件
vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求
aiyang1214878408的博客
05-28 3394
@[TOC]vue中使用element-ui的el-select单选远程搜索功能，文本输入不能及时发送请求 在element-ui中使用el-select远程搜索时，输入文本搜索无法及时发送网络请求获取数据，需要按下删除或者回车才能刷新选择框，但是选择一个值后会发现无法在去请求新的数据了。加入可多选属性时就没有这个问题。 引入组件 用ref绑定节点 <el-form-item label="产品名称：" prop="productName"> <el-select ref="
ElementUI 表单验证之ref、$refs和rules
qq_46617584的博客
06-21 4049
ElementUI 提供的表单Form支持表单验证，仅仅需要添加rules 属性值： 我们在el-form表单控件中发现了ref 属性，ref 属性涉及Dom 元素的获取(el-form表单对象)。我们首先需要了解下javasrcipt 是如何获取Dom 元素是通过：document.querySelector（".input"）获取dom元素节点 。Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是:ref 绑定控件，$refs 获取控件。ref 绑定控件： $
el-select下拉多选框和input输入框输入或选择一个就失去焦点问题
weixin_47058581的博客
02-03 1426
el-select下拉多选框和input输入框输入或选择一个就失去焦点问题
使用element-ui el-select 做下拉 全选+搜索 功能
酱子
11-01 6689
有时候，需要用到下拉列表 全选和搜索，并且鼠标放入的时候有下拉列表展示，以前的做法是 check + el-input搜索结合做个组件，现在这个方法直接使用el-select 就能做到这个需求功能：有搜索+有全选+有取消+有确认请求+有鼠标移入自动展示功能。使用element-ui el-select 做下拉 全选+搜索 功能。
element ui Select选择器 下拉框某条数据设置显示星星*
06-01
您可以使用Element UI Select组件的slot-scope来自定义下拉列表项的显示内容，具体实现步骤如下： 1. 在Select组件中定义一个template，使用v-slot:option来获取每个下拉列表项的数据； 2. 判断当前选项是否需要显示星号，如果需要，就在显示文本前面添加一个星号； 3. 返回处理后的文本即可。 示例代码如下： ```html <el-select v-model="value"> <template v-slot:option="{ option }"> <span v-if="option.showStar">*</span>{{ option.label }} </template> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :showStar="item.showStar"></el-option> </el-select> ``` 其中，options是一个数组，包含了所有下拉列表项的数据，每个数据对象中都有一个showStar属性，表示该选项是否需要显示星号。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值