el-select失去焦点（@blur）事件异常处理

常见原因

1. filterable属性导致事件绑定问题

在Vue Element Plus中，el-select组件搭配filterable属性进行搜索时，绑定在输入框上的@blur事件可能会失效。这是由于filterable属性导致blur事件绑定在输入框上，而非整个选择器上。

2. 事件绑定在子元素上

有时候，我们在子元素上绑定@blur事件，但触发的是父元素的blur事件，导致子元素的@blur事件失效。

3. 事件处理函数内部逻辑错误

在事件处理函数中，如果存在逻辑错误，可能会导致@blur事件失效。

解决方案

1. 使用visible-change事件

针对filterable属性导致事件绑定问题，我们可以使用element提供的visible-change事件进行绑定。

<template>
  <el-select v-model="value" filterable @visible-change="handleVisibleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  },
  methods: {
    handleVisibleChange(visible) {
      if (visible) {
        // 下拉框展开时，不触发任何操作
        return;
      }
      // 下拉框收起时，执行所需操作
      this.someMethod();
    },
    someMethod() {
      console.log('Dropdown is closed');
    }
  }
};
</script>

2. 通过@visible-change事件绑定下拉框的关闭事件

<el-select
          v-model="value"
          ref="fuzzySearch"
          multiple
          size="medium"
          placeholder="请选择文章标签"
          filterable
          automatic-dropdown
          @visible-change="focusSelectValue"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

下拉出现则为 true，隐藏则为 false

//出现则为 true，隐藏则为 false
focusSelectValue(value) {
   console.log(value);
},

3. 通过@focus事件绑定输入框的失去焦点事件  

<el-select
          v-model="value"
          ref="fuzzySearch"
          multiple
          size="medium"
          placeholder="请选择文章标签"
          filterable
          automatic-dropdown
          @focus="focusSelectValue"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

focus事件内绑定blur事件

focusSelectValue() {
        console.log(this.$refs.fuzzySearch);
        this.$refs.fuzzySearch.$refs.input.blur = () => {
          console.log(0);
        };
      },

参考文档