首页 > 其他分享 >el-select @focus 事件没有弹出下拉框

el-select @focus 事件没有弹出下拉框

时间:2023-09-27 11:56:28浏览次数:46  
标签:el 焦点 focus 获取 下拉框 select

el-select 获取焦点的时候没有出现下拉框,解决办法示例

<template>
  <el-select v-model="selectedValue" ref="select" @focus="handleFocus">
    <el-option label="Option 1" value="option1"></el-option>
    <el-option label="Option 2" value="option2"></el-option>
    <el-option label="Option 3" value="option3"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null
    };
  },
  methods: {
    handleFocus() {
      // 当 el-select 获取焦点时,展开下拉框
      this.$nextTick(() => {
        this.$refs.select.toggleMenu(true);
      });
    }
  }
};
</script>

 

标签:el,焦点,focus,获取,下拉框,select
From: https://www.cnblogs.com/harryzong/p/17732362.html

相关文章

  • WOA-ELM分类预测 | Matlab 鲸鱼算法(WOA)优化极限学习机(ELM)的分类预测
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • 论文解读:CrossPoint: Self-Supervised Cross-Modal Contrastive Learning for 3D Poin
    CrossPoint:Self-SupervisedCross-ModalContrastiveLearningfor3DPointCloudUnderstanding本文提出一种简单的跨模态3维—2维区域对应模块,分别将点云模态和图像模态提取的特征向量重新投影到一个公共的特征空间中,并基于最大化与模态无关的互信息的思想设计对比学习损失......
  • el-menu sidebar是否隐藏
    vue-element-admin  (git) 窗口宽度变化,菜单自动隐藏beforeMount(){window.addEventListener('resize',this.$_resizeHandler)},$_resizeHandler(){console.log('窗框宽度变化,这里执行了,window.addEventListener的使用')if(!document.hi......
  • element ui踩坑
    项目适配需要rem转换,但UI组件内部未转换问题:由于组件内,某些组件宽度和高度是通过prop传参,然后对行内样式动态赋值,所以单位还是px网上找的方法:将elementui的github源码拉下来,然后修改组件源码,然后打包,然后打补丁替换lib文件夹。个人觉得太繁琐,问题在于,所有的组件都得适配,......
  • Selenium进阶——解决web 自动化中上传文件的问题
    在做ui自动化测试中,经常会遇到上传文件或者图片的场景,通常的解决方案是自动化工具+autoIT,在这里我介绍一种通过jdk自带api——java.awt.Robot来解决类似问题的方法。java.awt.Robot类主要用于模拟用户点击键盘上的按键,或者模拟用户敲击鼠标等动作。在做web测试时,弹出窗口如下图所......
  • 使用EasyExcel 导入数据,失败原因数据导出
    引言在日常开发过程中,Excel导入是非常常见的场景,而且也有很多开源的项目是针对Excel的读写的,如Apache的poi,最近用的比较好的还是阿里的EasyExcel开源工具。平时我们只是简单的读取文件并写入数据库持久化即可,但是前段时间,产品搞了个需求,需要将导入失败的数据及原因写入Excel......
  • Node.js vs. Spring Boot:Hello World 性能对决,谁更快一点?
    前言:SpringBoot在Java生态中备受欢迎,它是一款基于Java构建的轻量级服务端框架,主要用于Web服务。SpringBoot的应用使得创建各类基于Spring的企业级应用变得异常简单。Node.js作为一种基于ChromeV8引擎的JavaScript运行时环境,在服务端上运行JavaScript代码。它以其独......
  • 微服务测试的关键——通过ELK查询日志
    为什么需要ELK一般我们在工作中查询日志搜索问题时,通常需要直接在日志文件中进行grep、awk操作就可以获得自己想要的信息。但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档、文本搜索太慢怎么办、如何多维度查询。随着微服务的广泛应用,无论系统日志,还是业务日......
  • Node.js vs. Spring Boot:Hello World 性能对决,谁更快一点?
    前言:SpringBoot在Java生态中备受欢迎,它是一款基于Java构建的轻量级服务端框架,主要用于Web服务。SpringBoot的应用使得创建各类基于Spring的企业级应用变得异常简单。Node.js作为一种基于ChromeV8引擎的JavaScript运行时环境,在服务端上运行JavaScript代码。它以其独特......
  • element-ui plus 修改对话框的样式,无效
    <el-dialogv-model="dialogVisible"title="Tips"width="30%":before-close="handleClose"append-to-body><span>Thisisamessage</span><template#footer>......