【elementui】解决el-select组件失去焦点blur事件每次获取的是上一次选中值的问题

在Element UI的el-select组件中，如果你遇到了在失去焦点时blur事件每次都获取到上次选中值的问题，这通常是因为在某些情况下，组件的状态没有正确更新。

为了解决这个问题，你可以尝试以下几种方法：

1. 确保你使用的是最新版本的Element UI，以确保任何已知的bug已被修复。
2. 如果你在使用Vue.js 2.x，确保你正确使用了v-model来绑定选择的值。
3. 如果你在使用Vue.js 3.x，请确保你正确使用了v-model以及组件的modelValue属性和update:modelValue事件。
4. 尝试使用ref属性来直接访问el-select组件实例，并调用它的blur方法，而不是依赖原生的blur事件。
5. 如果上述方法都不奏效，可以尝试在blur事件处理函数中使用this.$nextTick，这样可以确保在失去焦点后DOM已经更新。

下面是一个示例代码，展示了如何在Vue.js 2.x中使用v-model和ref来处理el-select组件的失去焦点事件：

<template>
  <el-select
    v-model="selectedValue"
    ref="selectRef"
    @blur="handleBlur"
  >
    <!-- options -->
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: null,
    };
  },
  methods: {
    handleBlur() {
      // 确保DOM更新后获取当前选中的值
      this.$nextTick(() => {
        const currentValue = this.selectedValue;
        // 处理blur事件，例如：
        console.log('Current selected value:', currentValue);
      });
    },
  },
};
</script>

在这个例子中，我们使用了v-model来创建数据绑定，并且通过ref属性为el-select组件设置了一个引用名。在handleBlur方法中，我们使用了this.$nextTick来确保在事件处理函数中获取到的是最新的选中值。