element-ui的el-select选择器的@blur事件失效的坑

最新推荐文章于 2025-06-03 17:44:29 发布

F-Fanger

最新推荐文章于 2025-06-03 17:44:29 发布

阅读量8.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue+element 文章标签： vue.js javascript html

本文链接：https://blog.youkuaiyun.com/qq_41287158/article/details/120436568

vue+element 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种解决Element-UI中el-select组件失焦事件(blur)有时无法触发的问题的方法。通过在select标签上添加ref引用并使用@focus事件来手动触发失焦事件，可以确保绑定函数得以执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-UI文档中本来el-select有个blur事件绑定函数属性。但是使用后发现有时候失焦事件并不能触发生效，也就导致所绑定的函数不能执行。

解决办法：
利用el-select的@focus方法，在select标签内添加 ref 于此便可在focus事件内触发 blur事件。代码如下：

 <el-select
            multiple
            filterable
            allow-create
            default-first-option
            v-model="request_msg"
            placeholder="请选择或自行输入拒绝原因"
            class="config-select"
            @focus="onBlur('request_msg', 'reqMsgRef')"
            ref="reqMsgRef"
          >
            <el-option
              v-for="item in refuseConfig"
              :key="item"
              :value="item"
              :label="item"
            ></el-option>
 </el-select>
onBlur(flag, ref) {
      this.$refs[ref].$refs.input.blur = () => {
      
      	// 这里执行失焦的代码
        const inp = this.$refs[ref].$refs.input.value
        if(!inp) return
        this[flag].push(inp)
      };
    },
  // this.$refs[ref].$refs.input 此根节点找到得根节点时输入得input
  // this.$refs.select.$refs.reference.$refs.input 此根节点找到得是最外层得 input。包含被选中的数据在内