Vue Element Plus 点击el-option后如何让el-select组件失去焦点

• 时机冲突：el-select选中el-option后，组件内部默认会执行下拉框收起、焦点回设到输入框的逻辑，你在click事件里同步调用blur，会被后续内部触发的focus逻辑覆盖，导致blur看起来无效。
• ref调用逻辑错误：你给el-select设置的ref被注释了，this.$refs.reason拿不到组件实例；而this.$refs.form.reason是表单绑定的model值，不是组件实例，自然无法调用blur方法。
• 组件方法特性：el-select暴露的blur方法本质是操作内部的input元素，当组件仍在处理选中事件的生命周期时，调用该方法不会生效。

步骤1：给el-select加上可用的ref #

把el-select的ref注释打开，正确声明：

<el-select
  v-model="form.reason"
  ref="reasonSelect"
  filterable
  remote
  reserve-keyword
  placeholder="test"
  :remote-method="remoteMethod"
  :loading="loading"
>

步骤2：调整blur调用时机 #

在选中事件里等待组件内部逻辑执行完成后再触发失焦，以下两种方案都可以：

方案1：结合nextTick+延迟调用 #

check_exist_variables: function (item) {
  // 你的原有业务逻辑
  // ...
  this.$nextTick(() => {
    // 0毫秒延迟等待内部事件执行完成
    setTimeout(() => {
      this.$refs.reasonSelect.blur()
      // 如果上述调用仍无效，直接操作内部原生input元素
      // this.$refs.reasonSelect.$el.querySelector('input').blur()
    }, 0)
  })
}

方案2：先手动关闭下拉框再失焦 #

check_exist_variables: function (item) {
  // 你的原有业务逻辑
  // ...
  this.$nextTick(() => {
    // 先手动关闭下拉弹窗，中断内部焦点逻辑
    this.$refs.reasonSelect.visible = false
    this.$refs.reasonSelect.blur()
  })
}

内容的提问来源于stack exchange，提问作者Sergey Ka