项目场景：

提示：这里简述项目相关背景：

在项目中，有些下拉框的数据过于庞大，这样页面有时候会卡死，在vue3中常用的组件库element-puls中有个组件可以避免

在项目中，有些需求要求下拉框选择的同时，可以输入模糊搜索，而且还要求在搜索不到的时候，可以自己手动输入。在vue3中常用的组件库element-puls中同样的，还是这个组件可以做到

---

解决方案：

提示：这里填写该问题的具体解决方案：

1：组件

<template>
  <el-select-v2
    v-model="modelValue"
    ref="selectRef"
    :placeholder="props.placeholder"
    :options="options"
    allow-create
    filterable
    clearable
    :disabled="props.disabled"
    @change="emitUpdateModelValue($event)"
  >
    <template #empty>
      {{ props.emptyPlaceholder }}
    </template>
  </el-select-v2>
</template>
<script lang="ts" setup>
import {getEmil} from "@/api/system/user";

const modelValue = ref()
const emit = defineEmits(['onChange'])
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
  },
  emptyPlaceholder: {
    type: String
  },
  userType:{
    type:Boolean,
    default:false,
  }
})
// 获取数据
const init = async () => {
  const result = await getEmil({
    userType:props.userType,
    keyword:modelValue.value||""
  })
  options.value = result.map((item) => {
    return {
      label: `${item.nickname} (${item.email})`,//昵称加邮箱
      value: `${item.id}`,//主键id
      username: `${item.username}`,//工号
      email: `${item.email}`,//邮箱
      nickname: `${item.nickname}`,//昵称
    }
  })
}

const emitUpdateModelValue = (event) => {
  let optionReturn = options.value.find(option => option.value === event);
  console.log(optionReturn)
  emit('onChange',optionReturn)
}


const options = ref<{
  label: string,
  value: string
}[]>([])


onMounted(async () => {
  await init()
})
</script>
<style scoped>

</style>

2：使用

<InputSelect
    :userType="false"
    clearable
    v-model="formData.personnelEmail"
    placeholder="请选择或输入" />



import InputSelect from "@/views/components/searchEmail.vue";