el-select下拉框同时使用@blur和@change

最新推荐文章于 2025-05-09 15:52:03 发布

武当王也拜见老天师

最新推荐文章于 2025-05-09 15:52:03 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Oct_Somnus/article/details/131598788

在Vue应用中，遇到一个el-select组件的问题，当change和blur事件同时存在时，change事件似乎失效了。原因是blur事件先于change事件执行。解决方法是在blur事件中使用setTimeout将处理函数变为异步，从而避免了冲突。现在blur事件的回调函数在100毫秒后执行，确保了change事件的正常触发。

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

需求：el-select选中选项时触发，失去焦点时也要触发

<el-select
      v-if="!getStatus() && isSelect"
      v-model="modelValue"
      clearable
      filterable
      placeholder="请选择"
      @change="onChange"
      @blur="onBlur"
    >
      <el-option
        v-for="dict in selectData"
        :key="dict.dictValue"
        :label="dict.dictLabel"
        :value="dict.dictLabel">
      </el-option>
</el-select>

代码如上，但change和blur会冲突，就是el-select原来的change事件失效了

    onChange(val) {
      console.log("value", val)
    },
    onBlur(i) {
      setTimeout(()=>{
        console.log(i)
      }, 100)
    }

bug原因

blur事件会比change事件先执行

解决方式

把blur事件上的代码改成异步的形式，比如说加个setTimeout

不知道大神们有没有其他好方法，还请告知。