elementUI el-select可编辑已选值

背景：在选择下拉值后，重新搜索时希望是原来选择的值，而不是空值。目前el-select没有提供可使用的api去进行控制。因此采用了原生的js方法

<template>
  <div>
    <!-- el-select 开启搜索功能，并且输入框不会清空已选值 -->
    <el-select v-model="selectedValue" ref="abc"  @click="focus" filterable placeholder="请输入搜索条件" clearable >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>

    <!-- 查询按钮 -->
    <el-button @click="submitQuery">查询</el-button>

    <!-- 展示查询条件 -->
    <div v-if="queryResult">
      <h3>查询结果：</h3>
      <p>查询条件: {{ queryResult }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null,  // 选中的值
      options: [
        { label: '选项33331', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项4s34', value: '3' },
        { label: '选项4', value: '4' },
        { label: '选项5', value: '5' },
      ],
      queryResult: null,  // 用于存放查询结果
    };
  },
  methods: {
    focus(){
      console.log('++++点击',this.selectedValue);
      this.options.forEach(item => {
        if(item.value == this.selectedValue){
          this.triggerInput(item.label)
        } else if( item.label == this.selectedValue){
          this.triggerInput(this.selectedValue)
        }
      });
    },
    // 手动触发输入事件
    triggerInput(value) {
      
      // 获取 el-select 输入框
      const input = this.$refs.abc.$el.querySelector('input');

      // 模拟用户输入
      const newValue = value;
      input.value = newValue;

      // 手动触发 input 事件
      const event = new Event('input', { bubbles: true });
      input.dispatchEvent(event);

      // 更新 v-model 绑定的值
      this.selectedValue = newValue;
    },

    // 提交查询
    submitQuery() {
      if (this.selectedValue) {
        this.queryResult = `你选择了：${this.selectedValue}`;
      } else {
        this.queryResult = '请选择一个查询条件';
      }
    }
  }
};
</script>