Vue.js - 实现ElementUI的远程搜索Select组件在失去焦点时自动创建条目功能

    我们知道 Element UI 的 Select 组件支持远程搜索功能，开启后可以从服务器搜索加载下拉数据条目。有时我们希望在输入内容没有返回匹配项时也支持自动创建新条目，通过 allow-create 这个属性就可以实现。但美中不足的是，创建新条目后还需要手动选择点击一下，否则无效。本文演示如何在失去焦点的时候，能够自动创建新条目。

1，效果图

2，样例代码

<template>
  <div>
    <el-select
      ref="select"
      v-model="selectedValue"
      filterable
      remote
      reserve-keyword
      :remote-method="remoteSearch"
      :loading="loading"
      placeholder="请输入关键词"
      @change="handleChange"
      @blur="handleBlur"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <span style="margin-left: 10px;">选中值：{{ selectedValue }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [],
      loading: false,
    };
  },
  methods: {
    remoteSearch(query) {
      if (query !== '') {
        this.loading = true;
        // 模拟远程搜索请求
        setTimeout(() => {
          this.options = [
            { value: 'apple', label: 'apple' },
            { value: 'banana', label: 'banana' },
            { value: 'orange', label: 'orange' }
          ].filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
          this.loading = false;
        }, 100);
      } else {
        this.options = [];
      }
    },
    handleChange(value) {
      // 用户选择了下拉框中的某个选项
      console.log('Selected:', value);
    },
    // 监听 input 输入框失去焦点事件，同步 selectedValue 值
    handleBlur() {
      // 通过 refs 获取 el-select 组件内部的 input 输入框的值
      const inputValue = this.$refs.select.$children[0].$refs.input.value;
      // 将 input 输入框的值同步到 selectedValue 值
      this.selectedValue = inputValue;
    },
  },
};
</script>