vue3中el-select支持下拉和输入

需求：想要el-select下拉框支持用户既能下拉选择，也能手动输入内容

el-select，主要是处理blur事件

 <el-select
                  clearable
                  filterable
                  v-model="form.issue.proofEditorEmail"
                  style="width: 300px"
                  @blur="handleBlur"
                  placeholder="Please enter an email or select a user."
                >
                  <el-option
                    :key="item.email"
                    :label="item.userFullName"
                    :value="item.email"
                    v-for="(item, index) in proofEditorsList"
                  />
                </el-select>

blur事件：

const handleBlur = (e) => {
  const filterData = proofEditorsList.value.find((item) => {
    return item.userFullName == e.target.value;
  });
  // TODO:

  if (filterData) {
    // 存在
    dataForm.proofEditorEmail = filterData.email;
  } else {
    dataForm.proofEditorEmail = e.target.value;
    that.$forceUpdate();
  }
};

proofEditorsList是下拉框的数据；that.$forceUpdate();这个方法的that 需要引入

const { proxy, ctx: that } = getCurrentInstance(); import { onMounted, reactive, ref, getCurrentInstance } from "vue";

=================第二种：

<el-select
                    clearable
                    v-model="ruleForm.owner"
                    style="width: 220px"
                    filterable
                    @blur="handleBlur2"
                     @change="handleChange"
                  >
                    <el-option
                      :label="item.firstName + ' ' + item.lastName"
                      :value="item.email"
                      :title="item.email"
                      v-for="item in ownerList"
                    />
                  </el-select>
                  
                  // 标志位：是否通过选择触发了 change
const changedBySelect = ref(false)
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
const handleChange = (value) => {

  changedBySelect.value = true
  ruleForm.owner = value
}
const handleBlur2 = (e) => {
  const inputValue = e.target.value
  if (changedBySelect.value) {
    changedBySelect.value = false
    return
  }

  if (!emailRegex.test(inputValue)) {
    ElMessage.warning('Please enter a valid email address')
    ruleForm.owner = ''
    return
  }
  const matched = ownerList.value.find(item => item.email === inputValue)
  if (matched) {
    ruleForm.owner = matched.email
  } else {
    ruleForm.owner = inputValue
  }

}